Detailliertes Beispiel für den 3D-Flop-Effekt von CSS3-Spezialeffekten

Dieser Artikel stellt hauptsächlich den 3D-Flip-Effekt von CSS3-Spezialeffekten vor. Ich hoffe, dass er für Sie hilfreich ist.

Ich habe kürzlich CSS3 gelernt und festgestellt, dass es immer besser wird. Das heutige CSS3 ist nicht mehr das vorherige CSS und die funktionalen Effekte, die es erzeugen kann, übersteigen unsere Vorstellungskraft. Es kann Flash implementieren, einige Effekte erzeugen, die von js erzeugt werden können, und es kann auch einige von ps erstellte Effekte wie Farbverläufe, abgerundete Ecken usw. schreiben. Es ist so umwerfend, dass ich glaube, dass viele Leute es bereits getan haben . Lass es uns genauer studieren, haha, ich habe mich heute auch ein wenig mit einigen seiner 3D-Effekte befasst.

Der sogenannte 3D-Karten-Flop-Effekt besteht eigentlich aus zwei Bildern, einem vorne und einem hinten. Wenn das vordere gedreht wird, dreht es sich zu einem Gewiss: Wenn der Winkel angepasst wird, drehen sich die nachfolgenden Bilder mit. Eines der Bilder dreht sich bis zu dem Punkt, an dem es nicht mehr sichtbar ist, aber das andere Bild, das sich gerade dreht, ist für uns sichtbar. Bist du ungeduldig, komm und lerne mit mir, haha~@@@

Zuallererst haben wir so ein Layout in HTML:

<p class="outer">
    <p class="p1"></p>
    <p class="p2"></p>
</p>

Unterschätzen Sie nicht das Äußere, es ist für diesen Inhalt unverzichtbar, ohne dass die späteren Effekte nicht erzielt werden können. Sobald das Layout fertig ist, ist es Zeit, mit der Arbeit daran zu beginnen. Das erste, was Sie tun müssen, ist auf jeden Fall die Breite und Höhe. Sie können es selbst bestimmen. Ich werde ihm zuerst eine Breite und Höhe geben. Jetzt, wo die äußeren Dinge erledigt sind, beginnen die inneren Dinge. Hier geben wir 200*200. Wenn ich jetzt in den Browser schaue, sehe ich, dass p1 und p2 nach oben und nach unten angezeigt werden. Das ist richtig. Sie müssen wissen, dass p ein Blockelement ist und eine ganze Zeile einnimmt. Aber das gilt nicht für das, was wir zuvor gesagt haben. Es muss ein Widerspruch zwischen Vorder- und Rückseite bestehen. Geben Sie ihm eine absolute Position, sodass die Mittelpunkte der beiden p zusammenfallen. Um die beiden p zu unterscheiden, müssen wir ihnen hier unterschiedliche Hintergrundfarben geben. Die vorbereitenden Arbeiten sind fast abgeschlossen, nun wollen wir sehen, wie wir den Effekt erzielen!

Wir wollen einen Karten-Flop-Effekt erzielen. Sobald wir es hören, wissen wir, dass es eine Rotation geben muss. Dies erfordert die Verwendung des neuen Attributs transform:rotateY(?deg ) in CSS3; Jemand fragt sich vielleicht, warum es rotationY ist, aber Sie wissen es nicht, oder? Wenn wir also die Maus nach p bewegen, müssen wir sie den Rotationseffekt erzielen lassen. Unabhängig davon, welches kleine p verwendet wird, können sie sich nicht gleichzeitig drehen, es sei denn, unsere Maus klickt auf „Ein“. dass p, da ist dieser Code,

.outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
            transform:rotateY(0deg);
        }

Die Drehung ist da, aber die Drehung ohne Übergangseffekt sieht hässlich aus, also hier, um ihnen einen Übergangseffekt zu geben, Sie Sie müssen das neue Attribut in CSS3 verwenden transition:all 2s; all bedeutet hier, dass alle seine Effekte übergehen. Apropos, wir haben uns eigentlich nicht damit beschäftigt, wie man das aktuelle nach hinten dreht, und das letztere wird unmittelbar danach erscheinen. Dies ist ein sehr wichtiges Attribut im Bild Transformation bedeutet, dass das Bild verschwindet, wenn es an eine unsichtbare Stelle auf dem Bildschirm verschoben wird. Das heißt, wir können es sehen, wenn es ursprünglich nach vorne zeigt, aber wenn es um 180 Grad entlang der Y-Achse gedreht wird, können wir es nicht mehr sehen. Wenn wir dieses Attribut nicht hinzufügen, können wir das umgekehrte Bild sehen Nach der Drehung ist es nicht mehr sichtbar. Deshalb werden wir dieses Attribut zu den beiden kleinen ps hinzufügen. Und um diesen Effekt zu erzielen, müssen wir eines der beiden kleinen Ps am Anfang nicht drehen. Wir können sehen, dass das andere, das dahinter liegt, um 180 Grad gedreht wird, sodass das erste P beginnt Zum Drehen sehen wir das zweite p nicht sofort, aber warten Sie, bis es sich an eine Stelle dreht, an der es nicht mehr sichtbar ist, und dann erscheint das zweite p. Der spezifische Code lautet wie folgt:

<html><head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        .outer{
           width: 510px;
            height: 340px;
            border: 1px red solid;
            margin: 0 auto;
        }
        .outer p{
           width:510px;
            height: 340px;
            position: absolute;
              transform-style: preserve-3d;
             backface-visibility:hidden;
            transition:all 2s;
        }
        .p1{
           background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .p2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
           transform:rotateY(0deg);
        }
    </style></head><body><p class="outer">
    <p class="p1"></p>
    <p class="p2"></p></p></body></html>

Das Obige ist der Hauptinhalt dieses Artikels. Ich hoffe, er kann allen helfen.

【Empfohlene verwandte Tutorials】

1. CSS-Video-Tutorial
2. CSS-Online-Handbuch
3 Bootstrap-Tutorial