CSS-3D-Transformation In CSS können Sie zusätzlich zur 2D-Transformation von Elementen auf der Seite auch eine 3D-Transformation an Objektelementen durchführen (stellen Sie sich die Seite als einen dreidimensionalen Raum vor, um Elemente auf der Seite zu verschieben, zu drehen, zu skalieren und zu neigen usw .). Wie 2D-Transformationen wirken sich 3D-Transformationen nicht auf umgebende Elemente aus und können andere Elemente überlappen. Das transformierte Element belegt jedoch weiterhin Platz an seiner Standardposition (vor der Transformation).
Dreidimensionales Koordinatensystem
Lassen Sie uns zunächst das dreidimensionale Koordinatensystem verstehen. Das sogenannte dreidimensionale Koordinatensystem fügt dem ursprünglichen zweidimensionalen Koordinatensystem eine Z-Achse hinzu und bildet so einen dreidimensionalen Raum, wie in der folgenden Abbildung dargestellt:
①x-Achse: Horizontal nach rechts Hinweis: Die rechte Seite von x ist ein positiver Wert und die linke Seite ist ein negativer Wert
②y-Achse: vertikal nach unten Hinweis: y hat unten positive Werte und oben negative Werte.
③Z-Achse: Vertikaler Bildschirm Hinweis: Positive Werte nach außen und negative Werte nach innen
Konvertierungseigenschaften
3D-Transformationsmethode
1.translate3d()
Die Funktion translator3d() wird verwendet, um die Position eines Elements im 3D-Raum zu verschieben. Das Merkmal dieser Transformation besteht darin, den Versatz des Elements in jede Richtung (X-Achse, Y-Achse, Z-Achse) durch drei zu definieren. dimensionale Vektorkoordinaten. Das Syntaxformat der Funktion ist wie folgt:
Translate3d(tx,ty,tz)
Die Parameterbeschreibung lautet wie folgt:
(1) tx: stellt die Entfernung dar, um die sich das Element in horizontaler Richtung (X-Achse) bewegt;
(2) ty: stellt die Entfernung dar, die das Element in vertikaler Richtung (Z-Achse) verschoben hat;
(3) tz: Gibt die Distanz an, um die sich das Element auf der Z-Achse bewegt. Für diesen Parameter können keine Prozentwerte verwendet werden.
2. TranslateZ()
Die Funktion translatorZ() wird verwendet, um Elemente entlang der Z-Achse des dreidimensionalen Koordinatensystems zu verschieben. Das Syntaxformat der Funktion ist wie folgt:
TranslateZ(tz);
Mit dem Parameter tz wird die Distanz eingestellt, um die sich das Element auf der Z-Achse bewegt.
Tipp: TranslateZ(tz); entspricht der Abkürzung von Translate3d(0, 0, tz);.
3.rotate3d()
Die Funktion „rotate3d()“ wird verwendet, um den Drehwinkel des Elements entlang der X-Achse, Y-Achse oder Z-Achse festzulegen. Diese Funktion dreht das Element nur entlang der festen Achse und verformt das Element nicht. Das Syntaxformat der Funktion „rotate3d()“ lautet wie folgt:
rotieren3d(x,y,z,a)
Die Parameterbeschreibung lautet wie folgt:
x: Legen Sie die X-Achsen-Koordinate der Rotationsachse fest.
y: Legen Sie die Y-Achsenkoordinate der Rotationsachse fest.
z: Legen Sie die Z-Achsen-Koordinate der Rotationsachse fest.
a: Legen Sie den Drehwinkel des Elements fest. Ein positiver Winkel bedeutet eine Drehung im Uhrzeigersinn und ein negativer Winkel bedeutet eine Drehung gegen den Uhrzeigersinn.
4. scale3d()
Die Funktion „scale3d()“ kann die Größe (Skalierung) von Elementen ändern. Das Syntaxformat der Funktion ist wie folgt:
scale3d(sx,sy,sz)
Die Parameterbeschreibung lautet wie folgt:
sx: stellt das Skalierungsverhältnis des Elements in Richtung der X-Achse dar;
sy: stellt das Skalierungsverhältnis des Elements in Richtung der Y-Achse dar;
sz: Gibt das Skalierungsverhältnis des Elements in Richtung der Z-Achse an.
5.matrix3d()
Die Funktion „matrix3d()“ ist der Funktion „matrix()“, die wir zuvor kennengelernt haben, sehr ähnlich, die Funktion „matrix3d()“ kann jedoch eine 4 × 4-Matrix verwenden, um eine dreidimensionale (3D) Transformation zu beschreiben. Alle 3D-Konvertierungsvorgänge können gleichzeitig über die Funktion „matrix3d()“ ausgeführt werden. Das Syntaxformat der Funktion ist wie folgt:
Matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
Die Parameterbeschreibung lautet wie folgt:
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: werden zur Beschreibung verschiedener 3D-Transformationen verwendet;
a4, b4, c4: Gibt den Umfang der Elementtransformation an.
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Dokument</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*Lassen Sie die Unterbox a beibehalten 3D-Raumumgebung*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100 %; background-color:pink;}.boxdiv:last-child{background-color:aquamarine;transform:rotateX(60deg);}</style></head><body><div><div><div> </ div><div></div></div></div></body></html>Laufergebnisse:
