Implementierung einer coolen 3D-Würfeltransformationsanimation in CSS3

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

Artikel empfehlen

Springboot integriert die Docker-Bereitstellung, um zwei Möglichkeiten zum Erstellen von Docker-Images zu implementieren

Docker ist eine Open-Source-Engine, mit der sich ...

Beispiel für die Implementierung eines globalen Wasserzeichens in Vue

Inhaltsverzeichnis 1. Erstellen Sie eine Wasserze...

MySQL-Datenbank zum Abrufen der Angaben zu Sekunden, Minuten, Stunden und Tagen vor und nach

Aktuelle Uhrzeit abrufen: Wählen Sie aktuellen Ze...

So verwenden Sie den Vue-Filter

Inhaltsverzeichnis Überblick Filter definieren Ve...

Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker

Problemphänomen: [root@localhost ~]# Docker-Image...

Verwenden Sie vue2+elementui für Hover-Prompts

Die Hover-Prompts von Vue2+elementui sind in exte...

JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt

Inhaltsverzeichnis 1. Standortobjekt 1. URL 2. Ei...

Tutorial zur Konfiguration und Verwendung des MySQL-Protokolls für langsame Abfragen

Vorwort Das MySQL Slow Query Log ist eine Funktio...

So verwenden Sie localStorage in JavaScript

Wenn Sie Entwickler sind und in die Welt von .NET...

Detaillierte Erklärung der KeepAlive-Anwendungsfälle in Vue

Bei der Entwicklung ist es häufig erforderlich, d...

Netzwerkkonfiguration des Host Only+NAT-Modus unter VirtualBox

Die Netzwerkkonfiguration des Host Only+NAT-Modus...

CSS realisiert den Sprechblaseneffekt mit scharfen Ecken im kleinen Chat-Dialogfeld mit scharfen Ecken

1. Verwenden Sie CSS, um ein kleines Chat-Dialogf...

10 schlechte Angewohnheiten, die Sie bei Docker-Containeranwendungen vermeiden sollten

Es besteht kein Zweifel, dass Container zu einem ...

Installations-Tutorial für die Zip-Version von MySQL 5.7.18

Die MySQL 5.7.18 Zip-Version von MySQL ist nicht ...

Spezifische Verwendung des Stapelkontexts in CSS

Vorwort Unter dem Einfluss einiger CSS-Interaktio...