suchen

Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie einen vertikalen Flip-Effekt in CSS3

So erzielen Sie einen vertikalen Flip-Effekt in CSS3

WBOY
WBOYOriginal
2021-12-14 11:14:503050Durchsuche

In CSS können Sie das Transformationsattribut verwenden, um einen vertikalen Flip-Effekt zu erzielen. Dieses Attribut kann das Element drehen, skalieren, verschieben oder neigen. Wenn dieses Attribut in Verbindung mit der Funktion „rotateX()“ verwendet wird, können Sie die Vertikale festlegen Flip-Stil des Elements. Die Syntax lautet: „Element {transform:rotateX(flip angle);}“.

So erzielen Sie einen vertikalen Flip-Effekt in CSS3

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So erzielen Sie einen vertikalen Flip-Effekt in CSS3

Wenn Sie in CSS einen vertikalen Flip-Effekt erzielen möchten, können Sie das Transformationsattribut verwenden, um das Element zu drehen, zu skalieren, zu verschieben, zu neigen oder zu spiegeln .

Wenn das Attribut mit der Funktion „rotateX()“ verwendet wird, können Sie den Stil des vertikalen Spiegelns von Elementen festlegen.

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="So erzielen Sie einen vertikalen Flip-Effekt in CSS3" ><br>
<img  src="1118.02.png" alt="So erzielen Sie einen vertikalen Flip-Effekt in CSS3" >
</body>
</html>

Ausgabeergebnis:

So erzielen Sie einen vertikalen Flip-Effekt in CSS3

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen vertikalen Flip-Effekt in CSS3. 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
Vorheriger Artikel：So erzielen Sie mit CSS den Effekt, dass das Bild verschwindet, nachdem es eine Sekunde lang angezeigt wurdeNächster Artikel：So erzielen Sie mit CSS den Effekt, dass das Bild verschwindet, nachdem es eine Sekunde lang angezeigt wurde

In Verbindung stehende Artikel

Mehr sehen