Um welche Achse dreht sich die CSS3-Rotation?-CSS-Tutorial-php.cn

Um welche Achse dreht sich die CSS3-Rotation?

WBOY

Freigeben： 2021-12-16 17:38:58

Original

3380 Leute haben es durchsucht

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.

Um welche Achse dreht sich die CSS3-Rotation?

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>

Nach dem Login kopieren

Ausgabeergebnis:

Um welche Achse dreht sich die CSS3-Rotation?

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>

Nach dem Login kopieren

Ausgabeergebnis:

Um welche Achse dreht sich die CSS3-Rotation?

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>

Nach dem Login kopieren

Ausgabeergebnis:

Um welche Achse dreht sich die CSS3-Rotation?

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>

Nach dem Login kopieren

Ausgabeergebnis:

Um welche Achse dreht sich die CSS3-Rotation?

(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!