Code: 1. „transform:rotateY(angle)“, Sie können den Flip-Stil des Elements entlang der Y-Achse festlegen. 2. „transform:rotateX(angle)“, Sie können den Flip-Stil des Elements entlang der Y-Achse festlegen die X-Achse; 3. „transform:rotateZ (Angle)“, Sie können den Flip-Stil des Elements entlang der Z-Achse festlegen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist der Flip-Code von CSS3-Elementen?
Wenn Sie in CSS den Flip-Effekt von Elementen erzielen möchten, müssen Sie das Transformationsattribut verwenden.
Das Transformationsattribut erzeugt bei Verwendung mit unterschiedlichen Funktionen unterschiedliche Flip-Display-Effekte.
1. Verwenden Sie das Transformationsattribut mit der Funktion „rotateY()“, um das Element so einzustellen, dass es entlang der Y-Achse gespiegelt wird.
Das Beispiel sieht wie folgt aus:
<!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:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="Was ist der Flip-Code für CSS3-Elemente?" >
<p>上面是沿着Y轴翻转180度，下面是原图</p>
<img src="1118.02.png" alt="Was ist der Flip-Code für CSS3-Elemente?" >
</body>
</html>Ausgabeergebnis:
2. Das Transformationsattribut arbeitet mit der Funktion „rotateX()“ zusammen, um das Element so einzustellen, dass es entlang der X-Achse kippt.
Das Beispiel sieht wie folgt aus:
<!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="1118.02.png" class="img1" alt="Was ist der Flip-Code für CSS3-Elemente?" >
<p>上面是沿着X轴翻转180度，下面是原图</p>
<img src="1118.02.png" alt="Was ist der Flip-Code für CSS3-Elemente?" >
</body>
</html>Ausgabeergebnis:
3. Das Transformationsattribut arbeitet mit der Funktion „rotateZ()“ zusammen, um das Element so einzustellen, dass es entlang der Z-Achse kippt.
Das Beispiel sieht wie folgt aus:
<!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:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="Was ist der Flip-Code für CSS3-Elemente?" >
<p>上面是沿着X轴翻转180度，下面是原图</p>
<img src="1118.02.png" alt="Was ist der Flip-Code für CSS3-Elemente?" >
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWas ist der Flip-Code für CSS3-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
