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

Was bedeutet this.parentNode.parentNode (übergeordneter Knoten des übergeordneten Knotens)?

Der übergeordnete Knoten des übergeordneten Knoten...

Verwenden von Zabbix zum Überwachen des Ogg-Prozesses (Windows-Plattform)

Dieser Artikel stellt vor, wie man das Ogg-Progra...

Grafisches Tutorial zur Installation und Konfiguration der MySQL 8.0.15 Winx64-Dekomprimierungsversion

In diesem Artikel wird die Installations- und Kon...

So implementieren Sie die Ein-Klick-Bereitstellung von NFS unter Linux

Serverinformationen Verwaltungsserver: m01 172.16...

Installationsprozess von MySQL5.7.22 auf dem Mac

1. Verwenden Sie das Installationspaket, um MySQL...

Vue implementiert eine einfache Notizblockfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Unterschiede zwischen proxy_pass in zwei Modulen in nginx

1. Die proxy_pass -Direktive des Moduls 1.ngx_str...

Zusammenfassung der allgemeinen Bedienungskenntnisse der MySQL-Datenbank

Dieser Artikel fasst gängige Betriebstechniken fü...

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

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

Javascript zum Erzielen eines Trommeleffekts

In diesem Artikel wird der spezifische Code von J...

So ändern Sie den Inhalt eines vorhandenen Docker-Containers

1. Docker ps listet Container auf 2. Docker cp ko...

Installieren Sie CentOS 7 auf VMware14 – Grafik-Tutorial

Einführung in CentOS CentOS ist eine Linux-Distri...

Win10 MySQL 5.6.35 Winx64 kostenlose Installationsversion Konfigurations-Tutorial

Tutorial zur kostenlosen Konfiguration der mysql ...

Erfahren Sie schnell, wie Sie mit der Vuex-Statusverwaltung in Vue3.0 beginnen

Vuex ist ein speziell für Vue.js-Anwendungen entw...

js realisiert bidirektionale Datenbindung (Accessor-Überwachung)

In diesem Artikelbeispiel wird der spezifische Co...