Heim > Artikel > Web-Frontend > So erzielen Sie einen dreidimensionalen Flip-Effekt in CSS3
So erzielen Sie einen dreidimensionalen Flip-Effekt in CSS3
- WBOYOriginal
- 2022-01-24 13:37:431638Durchsuche
In CSS3 können Sie das Attribut „transform“ mit den Funktionen „rotate3d()“, „rotateX()“, „rotateY()“ und „rotateZ()“ verwenden, um einen dreidimensionalen Flip-Effekt zu erzielen. Die Syntax lautet „transform:rotate3d(x,y,. z,Winkel)".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie einen dreidimensionalen Flip-Effekt in CSS3
Das Transformationsattribut wendet eine 2D- oder 3D-Transformation auf Elemente an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
Wenn dieses Attribut in Verbindung mit den vier Funktionen rotierenX(), rotierenY(), rotierenZ() und rotieren3d() verwendet wird, kann der dreidimensionale Flip-Effekt erzielt werden.
-
X: Von unten nach oben drehen mit der die Box als Ursprung
Wertbeschreibung in rotate3d(x,y,z,angle):
x: ist ein Wert zwischen 0 und 1, der hauptsächlich zur Beschreibung des Vektorwerts des Elements verwendet wird, das sich um den dreht X-Achse;
y: ist ein Wert zwischen 0 und 1, der hauptsächlich zur Beschreibung des Vektorwerts des um die Y-Achse rotierenden Elements verwendet wird;
z: ist ein Wert zwischen 0 und 1, der hauptsächlich zur Beschreibung verwendet wird Beschreiben Sie das Element, das sich um die Z-Achse dreht. Der Vektorwert der Drehung
a: ist ein Winkelwert, der hauptsächlich zur Angabe des Rotationswinkels des Elements im 3D-Raum verwendet wird. Wenn sein Wert positiv ist, dreht sich das Element im Uhrzeigersinn , andernfalls dreht sich das Element gegen den Uhrzeigersinn.
Die drei unten vorgestellten Rotationsfunktionen sind in ihrer Funktion äquivalent:
rotateX(a)-Funktion entspricht rotate3d(1,0,0,a)
rotateY(a)-Funktion entspricht rotate3d ( 0,1,0,a)
rotateZ(a) Funktion ist äquivalent zu rotation3d(0,0,1,a)
-
Das Beispiel ist wie folgt:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .img1{ transform:rotateX(180deg); } </style> </head> <body> <img src="1115.08.png" class="img1"><br> <img src="1115.08.png"> </body> </html>Ausgabeergebnis:
CSS-Video-Tutorial
)Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen dreidimensionalen Flip-Effekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!