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

Verwenden Sie zum Senden des Formulars ein Bild statt einer Schaltfläche.

Fehlerbehebung bei den von Alibaba Cloud hinzugefügten Sicherheitsgruppen-Ports und der Unfähigkeit, nach dem Hinzufügen auf sie zuzugreifen

Zweck: 1. Um das externe Netzwerk des Servers übe...

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

Verwenden Sie zum Senden des Formulars ein Bild statt einer Schaltfläche.

Detaillierte Erläuterung der Bereitstellungs- und Konfigurationsmethoden des Linux-Zabbix-Agenten

HTML-Formularanwendung beinhaltet die Verwendung von Kontrollkästchen und Optionsfeldern

Grundlegendes zur CSS-Eigenschaft „transform-origin“

Eine kurze Diskussion über die häufig verwendeten APIs der VUE uni-app

So bedienen Sie Datei- und Ordnerberechtigungen unter Linux

MySQL nimmt die durch Kommas getrennten Werte aus einem Feld heraus, um ein neues Feld zu bilden

HTML als Startseite festlegen und zu Favoriten hinzufügen_Powernode Java Academy

JS realisiert die automatische Wiedergabe der Timeline

Detaillierte Erläuterung der Verwendung der Drag & Drop-Zoom-Komponente für Vue-Bilder

Artikel empfehlen

Windows 2019 Aktivierungs-Tutorial (Office2019)

Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels

Erläuterung der HTTPS-Prinzipien

Detaillierte Erklärung der drei wichtigsten Frontend-Technologien React, Angular und Vue

css3-Animation, Ballrollen, js-Steuerung, Animationspause

Front-End-KI-Schnitttipps (Erfahrung)

mysql5.7.17 Installations- und Konfigurationsbeispiel auf einem 64-Bit-System von win2008R2

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Windows

Detaillierte Erläuterung der benutzerdefinierten MySQL-Funktionen und gespeicherten Prozeduren

Fehlerbehebung bei den von Alibaba Cloud hinzugefügten Sicherheitsgruppen-Ports und der Unfähigkeit, nach dem Hinzufügen auf sie zuzugreifen

So installieren und konfigurieren Sie MySQL und ändern das Root-Passwort

Vue-Interpretation der responsiven Prinzip-Quellcode-Analyse

Zwei Implementierungslösungen für die Vuex-Datenpersistenz

Implementierungscode für unendliches Scrollen mit n Containerelementen

Detaillierte Erläuterung der Generierung dynamischer Bibliotheken unter Linux und Anleitung zur Verwendung