Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Was ist der Flip-Code für CSS3-Elemente?

WBOY
Freigeben: 2021-12-15 11:57:40
Original
1700 Leute haben es durchsucht

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.

Was ist der Flip-Code für CSS3-Elemente?

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>
Nach dem Login kopieren

Ausgabeergebnis:

Was ist der Flip-Code für CSS3-Elemente?

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>
Nach dem Login kopieren

Ausgabeergebnis:

Was ist der Flip-Code für CSS3-Elemente?

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>
Nach dem Login kopieren

Ausgabeergebnis:

Was ist der Flip-Code für CSS3-Elemente?

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

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage