Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 einen 3D-Flop-Effekt (vollständiger Code im Anhang)
So erzielen Sie mit CSS3 einen 3D-Flop-Effekt (vollständiger Code im Anhang)
- 坏嘻嘻Original
- 2018-09-27 10:03:473640Durchsuche
Ich habe kürzlich etwas über CSS3 gelernt und finde, dass dies eine sehr praktische und coole Technologie ist. Sie kann nicht nur die in vorherigen Bildern ausgedrückten Muster und Formen ersetzen, sondern auch einige Spezialeffekte erzeugen. Zum Beispiel Schatteneffekte, Verlaufseffekte usw., wobei der 3D-Konvertierungseffekt besonders cool ist. Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS3, um einen 3D-Flip-Effekt zu erzielen. Ich hoffe, dass er für Freunde hilfreich ist.
Das Prinzip der Verwendung von CSS3 zur Erzielung eines 3D-Flip-Effekts
Der sogenannte Flip-Effekt besteht darin, das Bild entlang der y-Achse zu spiegeln . Wirkung.
Zunächst müssen wir uns darüber im Klaren sein, dass ursprünglich zwei Divs derselben Größe festgelegt wurden und nicht nur eine! Dann müssen wir die beiden Divs überlappen und die position:absolute-Anweisung verwenden, um die darüber und darunter platzierten Divs zu überlappen.
Als nächstes müssen wir das erste Div entlang der y-Achse drehen. Hier verwenden wir die Anweisung transform:rotageY (-180deg). Gleichzeitig müssen wir zwischen den beiden Divs unterscheiden und drehen Sie einen von ihnen gleichzeitig um 180 Grad und den anderen um 0 Grad.
Wenn das um 180 Grad gedrehte Div schließlich die Drehung abschließt, verstecken wir es und verwenden die Anweisung backface-visibility:hidden;, um die Funktion des Verschwindens des Bildes zu realisieren, wenn es an eine unsichtbare Stelle verschoben wird die Anzeige.
ps: Wenn jemand Unklarheiten über den oben genannten Inhalt hat, können Sie die entsprechenden Artikel auf dieser Website lesen.
Code, um CSS3 zu verwenden, um eine 3D-Animation zu erstellen Flip-Effekt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PHP中文网</title>
<script src="http://7xiyzi.com2.z0.glb.qiniucdn.com/20160409_weixinjquery-2.1.0.min.js?i=6" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="div1">
<div class="div2">
<img src="http://static.wesai.com/files/upload/9/bd9/feeae/9bd9dfeeaee3b9be37a3ad4e75fe7004.jpg" alt="So erzielen Sie mit CSS3 einen 3D-Flop-Effekt (vollständiger Code im Anhang)" >
</div>
</div>
</body>
</html>
<style>
.div1 {
width: 185px;
height: 251px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
}
.div1.div2 {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
backface-visibility：hidden;
}
img {
width: 185px;
height: 251px;
}
</style>
<script type="text/javascript">
$('.div1').click(() => {
$('.div1').addClass('div2')
})
</script>Der Effekt ist wie im Bild gezeigt
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS3 einen 3D-Flop-Effekt (vollständiger Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!