Beispielcode zur Implementierung eines 3D-Zauberwürfels mit CSS

Lassen Sie uns heute einen einfachen 3D-Zauberwürfel machen

Schauen wir uns zunächst die Renderings an! Nachdem Sie dies gelernt haben, können Sie einige 3D-Fotoalben im Internet verwenden

1. Bereiten wir zuerst unseren HTML-Code vor

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <Titel>3D Zauberwürfel</Titel>
        <meta charset="UTF-8">
    </Kopf>
    <Text>
    	<div class="top"></div> <!--Oben-->
    	<div class="bottom"></div> <!--Weiter-->
    	<div class="left"></div> <!--Links-->
    	<div class="right"></div> <!--Rechts-->
    	<div class="after"></div> <!--Nachher-->
    	<div class="before"></div> <!--Before-->
    </body>
</html>

Okay, unser HTML-Code ist fertig. Zunächst müssen wir uns dreidimensionale Gedanken machen und uns vorstellen, wie der Zauberwürfel in unserem Gehirn aussieht. Besteht er nicht aus sechs Flächen?

2. CSS-Stile hinzufügen

*{
    Rand:0; /* Standardstil entfernt den Rand*/
    Polsterung: 0;
}
div{ /*div allgemeine Stileinstellungen Höhe und Breite*/
    Breite: 300px;
    Höhe: 300px;
    Opazität: 0,5; /*Transparenz*/
}
.top{ /* Legt die Farbe nach Klassennamen fest. Die folgenden Farben sind alle festgelegt*/
    Hintergrundfarbe: braun;				
}
.unten{
    Hintergrundfarbe: blauviolett;
}
.links{
    Hintergrundfarbe: Blanchedalmond;
}
.Rechts{
    Hintergrundfarbe: Kadettenblau;
}
.nach{
    Hintergrundfarbe: Schokolade;
}
.vor{
    Hintergrundfarbe: Cyan;
}

Nun, an diesem Punkt ist das Fundament gelegt und wir können mit dem Bau des Gebäudes beginnen.

Dies muss der Effekt sein, den Sie sehen注意我這里是縮小了, und Sie sollten dieselben Blöcke wie ich haben, alle nebeneinander, wie Säulen gestapelt. Jetzt müssen wir anfangen, sie wie Papierstücke zusammenzusetzen.

2. Div überlappen lassen

div{							
    Breite: 300px;
    Höhe: 300px;
    position: absolute; /*Fügen Sie dem allgemeinen Stil von div eine absolute Positionierung hinzu*/
}
body{ /*Der nächste Schritt besteht darin, alle Divs auf dem Bildschirm zu zentrieren*/
    Höhe: 100vh;
    Breite: 100vw;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}

Jetzt sehen Sie diesen Effekt. Es gibt eindeutig sechs Quadrate, aber warum gibt es nur eines? Tatsächlich ist es nicht so. Es liegt nur daran, dass die anderen Divs hinter diesem Div liegen und das Div vorne unsere Sicht blockiert, sodass wir es nicht sehen können.

3. Offener 3D-Raum

Körper{
    transform-style: preserve-3d; /*Nur dieser Code wird benötigt, um den 3D-Raum zu aktivieren*/
    Höhe: 100vh;
    Breite: 100vw;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}

Die Divs zusammenfügen

.Spitze{
    Hintergrundfarbe: braun;
    transform:rotateX(90deg) translateZ(150px); /*zuerst drehen, dann verschieben*/
}
.unten{
    Hintergrundfarbe: blauviolett;
    transformieren: drehenX(-90 Grad) übersetzenZ(150px);
}
.links{
    Hintergrundfarbe: Blanchedalmond;
    transformieren:Y drehen(-90 Grad) Z übersetzen(150px);
}
.Rechts{
    Hintergrundfarbe: Kadettenblau;
    transformieren:Y drehen(90 Grad) Z übersetzen(150px);
}
.nach{
    Hintergrundfarbe: Schokolade;
    transformieren:Y drehen(180 Grad) Z übersetzen(150px);
}
.vor{
    Hintergrundfarbe: Cyan;
    transformieren:Y drehen(0 Grad) Z übersetzen(150px);
}

Was Sie sehen, sollte immer noch so aussehen. Tatsächlich haben wir die Montage des Zauberwürfels abgeschlossen, aber der Zauberwürfel liegt flach und wir können ihn nicht sehen, also erstellen Sie einfach eine Animation, um ihn zu drehen.你給div加上一點文字更容易觀察

4. Animationsrotation

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <Titel>3D Zauberwürfel</Titel>
        <meta charset="UTF-8">
        <style type="text/css">
*{
    Rand: 0;           
    /* Standardstil entfernt Ränder*/
    Polsterung: 0;
}
div{
    Breite: 300px;
    Höhe: 300px;
    Position: absolut;
    Deckkraft: 0,5;
    Textausrichtung: zentriert;
    Zeilenhöhe: 300px;
}
Körper{
    Transformationsstil: 3D bewahren;
    Höhe: 100vh;
    Animation: fram1 10s ease; /*Referenzanimation*/
    Breite: 100vw;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}

.Spitze{
    Hintergrundfarbe: braun;
    transformieren: drehenX(90 Grad) übersetzenZ(150px);

}
.unten{
    Hintergrundfarbe: blauviolett;
    transformieren: drehenX(-90 Grad) übersetzenZ(150px);
}
.links{
    Hintergrundfarbe: Blanchedalmond;
    transformieren:Y drehen(-90 Grad) Z übersetzen(150px);
}
.Rechts{
    Hintergrundfarbe: Kadettenblau;
    transformieren:Y drehen(90 Grad) Z übersetzen(150px);

}
.nach{
    Hintergrundfarbe: Schokolade;
    transformieren:Y drehen(180 Grad) Z übersetzen(150px);
}
.vor{
    Hintergrundfarbe: Cyan;
    transformieren:Y drehen(0 Grad) Z übersetzen(150px);
}
@keyframes fram1{ /* Animation Rotation X-Achse und Y-Achse */
    0 %, 100 % {
        transformieren: Y-Drehung (0 Grad) X-Drehung (0 Grad);
    }
    50 %{
        transformieren: Y-Drehung (180 Grad) X-Drehung (180 Grad);

    }
}
        </Stil>
    </Kopf>
    <body> <!--Fügen Sie Text hinzu, um das Bild deutlicher zu machen-->
    	<div Klasse="oben">1</div> 			
    	<div Klasse="unten">2</div>		
    	<div Klasse="links">3</div>		
    	<div Klasse="rechts">4</div>		
    	<div Klasse="nach">5</div>		
    	<div Klasse="vor">6</div>		
    </body>
</html>

Der gesamte Code ist hier. Ich habe es mit Ihnen fertiggestellt. Wenn Sie ein 3D-Fotoalbum erstellen möchten, fügen Sie dem Div einfach ein Hintergrundbild hinzu und background-color替換為background-image

V. Fazit

Lassen Sie uns über die Details sprechen! Natürlich ist dies auch das Wichtigste, ich hoffe, Sie sehen es. Sie haben nur den Code im Spleißvorgang gesehen. Zuerst haben wir sechs Divs mit width:300px與height:300px erstellt. Wir haben sie durch position:absolute überlappt. Sie müssen nur daran denken, dass absolute Positionierung die Ebenen überlappen lässt. z-inde: kann seine Ebene steuern. Jetzt kommen wir zum wichtigsten Teil, transform:rotateX(90deg) translateZ(150px); Warum drehe ich hier zuerst und verschiebe dann?

Kurz gesagt: Der Ort, den Sie erreichen, wenn Sie nach rechts abbiegen und weiterfahren, ist ein anderer als der Ort, den Sie erreichen, wenn Sie weiterfahren und dann nach rechts abbiegen. Das ist das Prinzip. Wenn Sie es verstehen, können Sie auch als Anfänger noch viel Spaß mit 3D haben. Wartet darauf, von Ihnen langsam erkundet zu werden.

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.

<<: So laden Sie Flash in HTML (2 Implementierungsmethoden)

>>: Zusammenfassung wissenschaftlicher Grundlagen und Anregungen für Webdesign und -produktion

Docker-Containerüberwachung und Protokollverwaltung – Implementierungsprozessanalyse

Artikel

W3C Tutorial (16): Weitere W3C Aktivitäten

Artikel

Detaillierte Erklärung, wie Sie verhindern können, dass Inhalte auf HTML-Seiten ausgewählt, kopiert oder mit der rechten Maustaste angeklickt werden.

Artikel

Schritte zur Vue-Batch-Update-DOM-Implementierung

Artikel empfehlen

24 praktische Tipps zur JavaScript-Entwicklung

Inhaltsverzeichnis 1. Initialisieren Sie das Arra...

So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung

Die aktuelle Umgebung ist: Centos 7.5 docker-ce 1...

React Native meldet den Fehler „Ein Parameter vom Typ ‚NSArray＜id＜RCTBridgeModule＞＞ kann nicht initialisiert werden“ (Lösung)

Kürzlich wurde beim Ausführen eines alten RN-Proj...

So generieren Sie MySQL-Beispielcodes für die stapelweise Generierung einer Tabelle mit nicht duplizierten Mobiltelefonnummern

Vorwort In vielen MySQL-Test-Szenarien müssen ein...

Beispielcode zur Implementierung eines 3D-Zauberwürfels mit CSS

Docker-Containerüberwachung und Protokollverwaltung – Implementierungsprozessanalyse

W3C Tutorial (16): Weitere W3C Aktivitäten

Detaillierte Erklärung, wie Sie verhindern können, dass Inhalte auf HTML-Seiten ausgewählt, kopiert oder mit der rechten Maustaste angeklickt werden.

Schritte zur Vue-Batch-Update-DOM-Implementierung

Detaillierte Erläuterung zum Bereitstellen und Installieren der chinesischen Version von Redash in Docker

So installieren Sie MySQL 8.0.17 und konfigurieren den Fernzugriff

Lösung für das Verschwinden des MySql-Dienstes aus unbekannten Gründen

VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren

Datenbankabfrageoptimierung: Unterabfrageoptimierung

Installations- und Konfigurationsmethode des Vue-Route-Routing-Managements

Artikel empfehlen

24 praktische Tipps zur JavaScript-Entwicklung

So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung

React Native meldet den Fehler „Ein Parameter vom Typ ‚NSArray＜id＜RCTBridgeModule＞＞ kann nicht initialisiert werden“ (Lösung)

So generieren Sie MySQL-Beispielcodes für die stapelweise Generierung einer Tabelle mit nicht duplizierten Mobiltelefonnummern

Nutzungs- und Best-Practice-Handbuch für die Überwachung in Vue3

10 SQL-Anweisungsoptimierungstechniken zur Verbesserung der MySQL-Abfrageeffizienz

WeChat-Miniprogramme ermöglichen nahtloses Scrollen

Einführung in den Prozess zum Erstellen einer TCP-Verbindung im Linux-System

Detaillierte Erklärung, wie man ein Passwort an den SSH/SCP-Befehl im Bash-Skript übergibt

Eine kurze Analyse des Funktionsaufrufprozesses unter der ARM-Architektur

So verwenden Sie Chrome Dev Tools zur Analyse der Seitenleistung (Front-End-Leistungsoptimierung)

Detailliertes Tutorial zum Bereitstellen von Springboot oder Nginx mit Kubernetes

Detaillierte Erläuterung verschiedener Fehlerbehandlungen, wenn Nginx nicht gestartet werden kann

Zugriffsvorgang im MySQL-Befehlszeilenmodus MySQL-Datenbankvorgang

Schritte zum Anpassen des Symbols in Vue