Heim > Artikel > Web-Frontend > Um welche Achse dreht sich die CSS3-Rotation?
Um welche Achse dreht sich die CSS3-Rotation?
- WBOYOriginal
- 2021-12-16 17:38:583288Durchsuche
In CSS3 gibt es viele Rotationssituationen: 1. Die durch die Funktion „rotateX()“ realisierte Rotation erfolgt um die X-Achse. 2. Die durch die Funktion „rotateY()“ realisierte Rotation erfolgt um die Y-Achse . Die Funktion „rotateZ()“ Die Drehung erfolgt um die Z-Achse. 4. Die Drehung durch die Funktion „rotate()“ erfolgt um den Ursprung.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
css3-Rotation erfolgt um welche Achse
In CSS kann die Rotation im Uhrzeigersinn, gegen den Uhrzeigersinn oder um die X-, Y- oder Z-Achse erfolgen. Verschiedene Rotationsstile entsprechen unterschiedlichen Funktionen.
1. Funktion „rotate()“
Verwenden Sie die Funktion „rotate()“, um Elemente im oder gegen den Uhrzeigersinn zu drehen.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Ausgabeergebnis:
2. Funktion „rotateX()“
Verwenden Sie die Funktion „rotateX()“, um das Element um die X-Achse zu drehen. Das Beispiel lautet wie folgt:
<html>
<head>
<style>
img{
transform:rotatex(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Ausgabeergebnis:
3. Funktion „rotateY()“
Verwenden Sie die Funktion „rotateY()“, um das Element um die Y-Achse zu drehen folgt:
<html>
<head>
<style>
img{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Ausgabeergebnis:
4. Funktion „rotateZ()“
Verwenden Sie die Funktion „rotateZ()“, um das Element um die Z-Achse zu drehen. Das Beispiel lautet wie folgt:
<html>
<head>
<style>
img{
transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Ausgabeergebnis:
(Freigabe von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonUm welche Achse dreht sich die CSS3-Rotation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!