Heim >Web-Frontend >H5-Tutorial >Erzielen Sie einen 3D-Flip-Effekt der Karte
Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen vorstellen, um den 3D-Kartenumdrehungseffekt zu erzielen. Hier sind die tatsächlichen Fälle, werfen wir einen Blick darauf.
In diesem Artikel wird der Beispielcode von CSS vorgestellt, um den 3D-Flip-Effekt der Karte zu erzielen, der mit allen geteilt wird. Die Details lauten wie folgt:
Effekt:
Code:
html:
<p class="main"> <p class="box b1"></p> <p class="box b2"></p> </p>
css:
.main { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%,-50%); -webkit-perspective: 1500; -moz-perspective: 1500; } .box { position: absolute; top: 0; left: 0; width: 300px; height: 300px; transition: all 1s; backface-visibility: hidden; border-radius: 10px; cursor: pointer; } .b1{ background:skyblue; } .b2 { background:tomato; transform: rotateY(-180deg); }
var b1 = document.querySelector(".b1"); var b2 = document.querySelector(".b2"); b1.onclick = function() { b1.style.transform = "rotateY(180deg)"; b2.style.transform = "rotateY(0deg)"; } b2.onclick = function() { b2.style.transform = "rotateY(-180deg)"; b1.style.transform = "rotateY(0deg)"; }
-webkit-perspective: Perspektivischer Effekt
backface-visibility: Versteckt die Rückseite des gedrehten p-Elements
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
h5 implementiert mehrere Bildvorschau-Uploads und anklickbare Drag-Steuerelemente
Front-End-Technologie implementiert Texttextur-Overlay
Das obige ist der detaillierte Inhalt vonErzielen Sie einen 3D-Flip-Effekt der Karte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!