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

Wie implementiert MySQL ACID-Transaktionen?

Vorwort Kürzlich wurde ich in einem Interview gef...

Verstehen Sie einfach die Schreib- und Ausführungsreihenfolge von MySQL-Anweisungen

Es gibt einen großen Unterschied zwischen der Sch...

Detaillierte Erklärung des Linux-Kernel-Makros Container_Of

Inhaltsverzeichnis 1. Wie werden Strukturen im Ge...

MySQL-Datenbank GTID realisiert Master-Slave-Replikation (super praktisch)

1. Maria-Quelle hinzufügen vi /etc/yum.repos.d/Ma...

Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld

Voraussetzungen Compose ist ein Tool zum Orchestr...

js implementiert Tabellen-Drag-Optionen

In diesem Artikelbeispiel wird der spezifische JS...

Ausführliches Installationstutorial für MySQL 8.0.12 winx64

In diesem Artikel finden Sie das Installations-Tu...

Detaillierte Erklärung zum Kopieren und Sichern von Docker-Containerdaten

Hier nehmen wir den Jenkins-Container als Beispie...

Was sind Inline-Elemente und Blockelemente?

1. Inline-Elemente nehmen nur die Breite des Inhal...

Verwendung von Vue-Filtern und benutzerdefinierten Anweisungen

Inhaltsverzeichnis Filter 01.Was ist 02. Wie es g...

Wir zeigen Ihnen einen Trick, um einen Textvergleich unter Linux durchzuführen

Vorwort Während des Schreibens des Codes werden w...

Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Zusammensetzung der Tabellenbeschriftung Die Tabe...

Installation von Docker CE auf Ubuntu

Dieser Artikel dient zur Aufzeichnung der Install...

Implementierung des Deployment-War-Package-Projekts mit Docker

Um War mit Docker bereitzustellen, müssen Sie ein...

So legen Sie die Position des Blockelements in der Mitte des Fensters fest

So legen Sie die Position des Blockelements in de...