Detaillierte Erklärung des CSS3-Rotationswürfelproblems

3D-Koordinatenkonzept

Wenn sich ein Element dreht, dreht sich seine Koordinatenachse mit.
Beachten Sie das Problem mit der -y-Richtung

Der Effekt der Würfelrotation

analysieren

Ein Container enthält 6 Divs
Position: absolut, dann überlappen sich die sechs Flächen vollständig
Durch Transformation an die entsprechende Position anpassen: rotateX/Y/Z(), translateX/Y/Z()
Fügen Sie Übergangsanimationseffekte hinzu
Beachten Sie, dass die Drehung hier um die Mittellinie erfolgt, sodass nur 100 Pixel
Wenn er sich dreht, dreht sich auch seine Koordinatenachse mit ihm (das ist sehr wichtig)

Code

<!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>Dokument</title>
    <Stil>
        *{
            Rand: 0px;
            Polsterung: 0px;

        }
        Körper{
            Perspektive: 800px;
            Hintergrund: #000000;
        }
        #Container{
            Höhe: 200px;
            Breite: 200px;
            Rand: 100px auto 0;
            Position: relativ;
            Transformationsstil: 3D bewahren;
            Animation: Bewegung 1 Sekunde, unendlich;

        }
        @keyframes verschieben{
            aus{
                transformieren: Y-Drehung (0 Grad) Z-Drehung (0 Grad);
            }
            Zu{
                transformieren: Y-Drehung (360 Grad) Z-Drehung (360 Grad);
            }
            
        }
        #container>div{
            Höhe: 100%;
            Breite: 100 %;
            Rahmenradius: 5px;
            Hintergrund: rgba(255,255,255,0,5);
            Position: absolut;
            links: 0px;
            rechts: 0px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 200px;
            Schriftgröße: 30px;
        }
        #eins{
            transformieren: drehenX(-90 Grad) übersetzenZ(100px);
        }
        #zwei{
            transformieren: übersetzenZ(100px);
        }
        #drei{
            transformieren: Y drehen (-90 Grad) Z verschieben (100px);
        }
        #vier{
            transformieren: Y drehen (-180 Grad) Z verschieben (100px);
        }
        #fünf{
            transformieren: Y drehen (90 Grad) Z verschieben (100 Pixel);
        }
        #sechs{
            transformieren: übersetzenZ(-100px);
        }
        
    </Stil>
</Kopf>
<Text>
    <div id="Behälter">
        <div id="eins">1</div>
        <div id="zwei">2</div>
        <div id="drei">3</div>
        <div id="vier">4</div>
        <div id="fünf">5</div>
        <div id="sechs">6</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.

<<: html-Seite!--[if IE]...![endif]--Detaillierte Einführung in die Verwendung

>>: MySQL-unabhängiger Index und gemeinsame Indexauswahl