Mit CSS3 3D-Effekten einen Würfel erstellen

Wenn wir lernen, die 3D-Effekte von CSS3 zum Erstellen eines Würfels zu verwenden, können wir die Rotations- und Verschiebungseigenschaften von 3D-Szenen besser verstehen. Das dynamische Bild unten wird mithilfe einer 3D-Rotationsverschiebung in Kombination mit Animationseffekten erstellt. Interessierte Schüler können nach Abschluss der Würfelproduktion das Hinzufügen verschiedener Animationseffekte ausprobieren.

Kommen wir zum Thema. Hier ist der Prozess der Erstellung eines Würfels mithilfe von 3D-Mehrfachtransformationen.
Was Sie vorher verstehen müssen, ist, dass die x-, y- und z-Koordinatenachsen jeder Fläche im Würfel auf der Grundlage des Mittelpunkts jeder Fläche entwickelt werden. Mit anderen Worten: Um eine 3D-Transformation auf einer bestimmten Fläche durchzuführen, müssen Sie diese Fläche als Koordinatenachsenreferenz verwenden. Wenn Sie den gesamten Würfel transformieren möchten, müssen Sie die ursprüngliche Position des übergeordneten Elements finden. Im Bild oben handelt es sich dabei um die violette transparente Ebene.

1. Ein Würfel besteht aus 6 Flächen, die gedreht werden. Daher müssen wir zuerst die 6 Flächen konstruieren und ihre Attributwerte und 3D-Eigenschaften festlegen. Hier verwende ich eine Kombination aus ul und li, um ihn zu konstruieren, aber Sie können auch andere Blockelemente verwenden, um ihn zu konstruieren.

CSS-Stile.........

*{Rand:0;Padding: 0;}
   li{Listenstil: keine;}
   html,body{height: 100%;}
   body{perspective: auto;}/*3D-Tiefenschärfe einstellen*/
   .box1{
    Breite: 200px;
    Höhe: 200px;
    Position: absolut;
    links: 0; rechts: 0; oben: 0; unten: 0; Rand: automatisch;/*UL in der Bildschirmmitte platzieren*/
    Hintergrund: rgba(244,4,253,0.3);/*Gib ul einen violetten transparenten Hintergrund*/
    transform-style:preserve-3d;/*Definiere den Stil von ul als 3D-Attribut*/
    Animation: Box 10 s 0,3 s linear unendlich;
    }
   li{
    Breite: 200px;
    Höhe: 200px;
    Position: absolut; links: 0; oben: 0;/*Lassen Sie die 6 Li in der Bildschirmmitte einander überlappen*/
    Schriftart: 50px/200px „Microsoft YaHei“;
    Farbe: weiß;
    Textausrichtung: zentriert;
    } 
   ul{
   transform: rotateY(20deg) rotateX(20deg);/*Lassen Sie ul um einen bestimmten Winkel rotieren, um die Beobachtung der Transformationseffekte jeder Oberfläche zu erleichtern*/
   }
html...............
<ul Klasse="Box1">
    <li>Vorher</li>
    <li>Nachher</li>
    <li>Links</li>
    <li>Richtig</li>
    <li>Nach oben</li>
    <li>Weiter</li>  
</ul> 

Das Bild oben zeigt den Effekt der sich überlappenden Texte zwischen den 6 Li. Dies ist auch die Anfangsposition von Li. Darauf basierend werden wir eine 3D-Transformation durchführen.

2. Um die 3D-Transformation des gesamten Würfels zu erleichtern, nehmen wir im Allgemeinen die Anfangsposition von ul (übergeordnetes Element) als Ausgangspunkt der Transformation. Es ist zu beachten, dass transform: translateZ(-100px) rotateY(180deg); und transform: rotateY (180deg) translateZ(-100px); unterschiedliche Auswirkungen haben. Entsprechende Transformationen sollten entsprechend den tatsächlichen Bedingungen vorgenommen werden.

Fügen Sie den folgenden Code unter dem obigen CSS-Code hinzu:

           li:ntes-Kind(1){
    Hintergrund: #ff0;
    transformieren: übersetzenZ(100px);
   }
   li:ntes-Kind(2){
    Hintergrund: #330;
    transformieren: verschiebeZ(-100px) dreheY(180 Grad);
   }
   li:ntes-Kind(3){
    Hintergrund: #f00;
    transformieren: verschiebeX(-100px) dreheY(-90 Grad);
   }
   li:ntes-Kind(4){
    Hintergrund: #0f0;
    transformieren: verschiebeX(100px)dreheY(90 Grad);
   }
   li:ntes-Kind(5){
    Hintergrund: #0ff;
    transformieren: verschiebeY(-100px) dreheX(90 Grad);
   }
   li:ntes-Kind(6){
    Hintergrund: #00f;
    transformieren: verschiebeY(100px) dreheX(-90 Grad);
   }

Im obigen Code wird zuerst die Methode der Verschiebung und dann der Drehung verwendet. Sie können auch zuerst die Methode der Drehung und dann der Verschiebung für li: li:nth-child(3) ändert und die linke Seite des Würfels von der ursprünglichen X-Achsenrichtung zur Z-Achsenrichtung wechselt.

Das Obige ist eine Möglichkeit, mit CSS3 einen Würfeleffekt zu erzeugen. Sie können dem Code auch Hover-, Animations-, Übergangs- und andere Effekte hinzufügen, um ihn interessanter zu gestalten. Wenn Sie die Verwendung von 3D-Mehrfachtransformationen verstehen, können Sie den Würfeleffekt mit verschiedenen Methoden erzielen.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Erstellen eines Würfels mit CSS3-3D-Effekten. Weitere relevante CSS3-3D-Würfelinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!