Heim >Web-Frontend >CSS-Tutorial >Um welche Achse dreht sich die CSS3-Rotation?

Um welche Achse dreht sich die CSS3-Rotation?

WBOY
WBOYOriginal
2021-12-16 17:38:583392Durchsuche

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>

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>

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>

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>

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn