Implementierung einer coolen 3D-Würfeltransformationsanimation in CSS3

Ich liebe das Programmieren, es macht mich glücklich!

Hallo zusammen, ich bin Counter. In diesem Kapitel verwendet Weibo hauptsächlich einige neue Funktionen von CSS3.

Keyframes werden hauptsächlich verwendet, um 3D-Grafiken zu bewegen, was einige abstrakte Ideen und dreidimensionale Vorstellungskraft erfordert.

Lassen Sie mich Ihnen zuerst den fertigen Effekt zeigen. Der Code ist nicht schwierig und jede Codezeile ist ausführlich kommentiert. Es ist reines CSS, ohne JS. CSS3 ist gut.

Die Wirkung ist wie folgt:

Jede Zeile enthält Kommentare, daher werde ich sie nicht wiederholen. Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>3D-Rotation</title>
    <Stil>
        /* Legen Sie die Schärfentiefe für das äußerste übergeordnete Element fest, um den Elementen darin einen dreidimensionalen Raum zu geben, und legen Sie die Breite und Höhe fest*/
        .wrapper {
            /* Schärfentiefe 600 Pixel */
            Perspektive: 500px;
            /* Setze den Randabstand oben auf 100px, links und rechts adaptiv und unten auf 0 */
            Rand: 100px auto 0;
            Breite: 200px;
            Höhe: 200px;
            /* Rand: 1px tief schwarz; */
        }
        
        .Kasten {
            /* Relative Positionierung festlegen, sodass untergeordnete Elemente relativ zu sich selbst positioniert werden*/
            Position: relativ;
            /* Stellen Sie das Element so ein, dass der 3D-Effekt erhalten bleibt. Wenn das Element nicht eingestellt ist, wird der 3D-Effekt nicht angezeigt*/
            Transformationsstil: 3D bewahren;
            Breite: 200px;
            Höhe: 200px;
            /* move ist der Keyframe-Satz, Bewegung für 8 Sekunden, gleichmäßige Bewegung, unendlich oft (die Bedeutung jedes Parameters) */
            Animation: 8 s lineare, unendliche Bewegung;
        }

        /* Wähle alle Elemente aus, die mit „item“ beginnen, und positioniere sie alle an der Position ihres übergeordneten Elements*/
        div[Klasse^="Artikel"] {
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 200px;
            Höhe: 200px;
            /* Text links- und rechtsbündig ausrichten */
            Textausrichtung: zentriert;
            /* Den Text vertikal ausrichten */
            Zeilenhöhe: 200px;
        }

        /* Der Würfel hat sechs Seiten, jedes Element 1 bis 6 stellt eine Seite dar und Element 1 bis 6 im Inneren hat drei Achsen, x, y, z */
        /* Die x-Achse entspricht der Breite Ihres Computerbildschirms, von links nach rechts. Die Y-Achse ist die Achse der Höhe Ihres Computerbildschirms, von oben nach unten. Die Z-Achse ist die Achse von Ihren Augen, wenn Sie vertikal auf den Computerbildschirm schauen, und die Richtung ist vom Computerbildschirm zu Ihren Augen*/
        /* Erste Seite festlegen */
        .Artikel1 {  
            /* Bewegen Sie sich 100 Pixel entlang der Z-Achse in Richtung Ihres Auges */
            transformieren: übersetzenZ(100px);
            /* Stellen Sie die Hintergrundfarbe ein, der letzte Parameter ist die Transparenz, eingestellt auf 0,6 */
            Hintergrundfarbe: rgba(255, 0, 0, 0,6);
        }
        /* Zweite Seite einrichten */
        .item2 {
            /* Eine Bewegung von 100px nach innen entlang der Z-Achse ergibt -100px */
            transformieren: übersetzenZ(-100px);
            Hintergrundfarbe: rgba(72, 42, 245, 0,6);
        }
        /* Dritte Seite festlegen */
        .item3 {
            /* 90 Grad entlang der x-Achse drehen, dann 100 Pixel entlang der z-Achse bewegen (deg bedeutet hier Grad) */
            transformieren: rotierenX(90 Grad) übersetzenZ(100px);
            Hintergrundfarbe: rgba(217, 230, 36, 0,6);
        }
        /* Vierte Seite festlegen */
        .item4 {
            /* 90 Grad entlang der x-Achse drehen, dann -100px entlang der z-Achse verschieben */
            transformieren: rotierenX(90 Grad) übersetzenZ(-100px);
            Hintergrundfarbe: rgba(58, 7, 51, 0,6);
        }
        /* Fünfte Seite festlegen */
        .item5 {
            /* 90 Grad entlang der Y-Achse drehen, dann -100px entlang der Z-Achse verschieben */
            transformieren: Y drehen (90 Grad) Z verschieben (-100px);
            Hintergrundfarbe: rgba(241, 142, 75, 0,6);
        }
        /* Sechste Seite festlegen */
        .item6 {
            /* 90 Grad entlang der Y-Achse drehen, dann 100 Pixel entlang der Z-Achse bewegen */
            transformieren: Y drehen (90 Grad) Z verschieben (100 Pixel);
            Hintergrundfarbe: rgba(125, 178, 238, 0,6);
        }

        /* Setzen Sie Keyframes, um den Box-Container zu drehen, und drehen Sie ihn von 0 aus jeweils um 360 Grad entlang der x-, y- und z-Achse*/
        @keyframes verschieben {
            0% {
                transformieren: X-Drehen(0) Y-Drehen(0) Z-Drehen(0);
            }
            100 % {
                transformieren: X-Drehung (360 Grad) Y-Drehung (360 Grad) Z-Drehung (360 Grad);
            }
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Wrapper">
        <div Klasse="Box">
            <div Klasse="Artikel1">1</div>
            <div Klasse="Element2">2</div>
            <div Klasse="Artikel3">3</div>
            <div Klasse="item4">4</div>
            <div Klasse="item5">5</div>
            <div Klasse="item6">6</div>
        </div>
    </div>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Data URI und MHTML Komplettlösung für alle Browser

>>: Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann

Implementierung einer coolen 3D-Würfeltransformationsanimation in CSS3

Docker startet im Status „Beendet“

JavaScript implementiert die Klick-Umschaltfunktion

Detaillierte Zusammenfassung des JavaScript-Arrays

Typische Fälle von MySQL-Indexfehlern

MySQL 5.0.96 für Windows x86 32-Bit Green - vereinfachte Version - Installations-Tutorial

Detaillierte Erläuterung der MySQL-Datenbank mit zig Millionen Datenabfragen und -speicherungen

Web realisiert den Code zum Öffnen des Fensters zum Hochladen von Dateien durch Klicken auf das Bild

So beschränken Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen

Zusammenfassung der zehn häufigsten Probleme bei MySQL-Indexfehlern

Tipps zum Deaktivieren des Kompatibilitätsansichtsmodus von IE8 und IE9 mithilfe von HTML

Artikel empfehlen

Vue implementiert Dialogkapselung

So vermeiden Sie die URL-Zeitzonenfalle in MySQL

Sechs Tipps zur Verbesserung der Ladegeschwindigkeit von Webseiten

So aktualisieren Sie CentOS7 auf CentOS8 (detaillierte Schritte)

MySQL-Methode zum rekursiven Suchen nach allen untergeordneten Knoten eines Menüknotens

Lösung für das Problem, dass synchrone Replikationsfehler im MySQL5.6 GTID-Modus nicht übersprungen werden können

MySQL-Konfiguration SSL-Master-Slave-Replikation

Beispiel für die Konfiguration der domänenübergreifenden Fehlerbehebung in nginx

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

Detaillierte Erläuterung der Verwendung des DockerHub-Image-Repository

So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil

Detaillierter Prozess der Installation von nginx1.9.1 auf centos8

Verwendung und Optimierung der MySQL COUNT-Funktion

So erstellen Sie manuell ein neues Image mit Docker

Häufige Linux-Fehler bei der chinesischen Übersetzung (Neulinge müssen das wissen)