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

Der Unterschied zwischen Animation und Übergang

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

Der Unterschied zwischen Animation und Übergang

So aktualisieren Sie alle Python-Bibliotheken in Ubuntu 18.04 auf einmal

So legen Sie den Fokus auf HTML-Elemente fest

MySQL verwendet die Partitionsfunktion, um eine horizontale Partitionierungsstrategie zu implementieren

So schreiben Sie DROP TABLE in verschiedene Datenbanken

Detailliertes Tutorial zur Installation von InfluxDB in Docker (Leistungstest)

Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse

Einführung und Verwendungsübersicht der React-Native-Screenshot-Komponente react-native-view-shot

So generieren Sie ein kostenloses Zertifikat mit OpenSSL

MySQL 8.0 MIT Abfragedetails

Artikel empfehlen

Verwenden Sie CSS, um einen kreisförmigen Welleneffekt zu erzielen

Weitere beliebte und kreative Beispiele für Webdesign mit dunklem Hintergrund

Prozessdiagramm zum Aufbau des Linux RabbitMQ-Clusters

Dockers Mechanismus zur Integritätserkennung

Warum wird die MySQL-Paging-Funktion bei Verwendung von Limits immer langsamer?

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27 winx64

Reines CSS, um die Bildlaufleiste auszublenden, aber dennoch den Bildlaufeffekt beizubehalten (mobil und PC)

MySQL-Replikation - ausführliche Erklärung und einfaches Beispiel

So verwenden Sie CSS-Attribute, um Mausereignisse zu blockieren (Mausklicks können obere Elemente durchdringen)

So verbergen und fälschen Sie die Versionsnummer in Nginx

Detaillierte Erläuterung von JavaScript-WebAPI-, DOM-, Ereignis- und Operationselementbeispielen

Einführung in /etc/my.cnf-Parameter in MySQL 5.7

Detaillierte Erläuterung der Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript

Konfiguration und Lizenzaktivierung der Remotedesktopdienste von Windows Server 2016 (2 Benutzer)

So verstehen Sie den Unterschied zwischen ref toRef und toRefs in Vue3