Heim  >  Artikel  >  Web-Frontend  >  So erzielen Sie in CSS3 zweimal einen Flip-Effekt

So erzielen Sie in CSS3 zweimal einen Flip-Effekt

WBOY
WBOYOriginal
2021-12-16 10:16:571946Durchsuche

Methode: 1. Verwenden Sie die Anweisung „@keyframes name {100%{transform:rotateY(angle);}}“, um den Animationseffekt des Element-Flip festzulegen. 2. Verwenden Sie die Anweisung „Element {animation-iteration-count: 2}"-Anweisung zum Festlegen. Die Anzahl der Elementanimationsumdrehungen beträgt 2 Mal.

So erzielen Sie in CSS3 zweimal einen Flip-Effekt

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

So erzielen Sie den Effekt des zweimaligen Umdrehens in CSS3

Wenn Sie in CSS den Effekt des zweimaligen Umdrehens eines Elements erzielen möchten, können Sie die Regel „@keyframes“ sowie die Animations- und Transformationsattribute festlegen der Animationseffekt des Umdrehens des Elements.

Zu diesem Zeitpunkt wird die Flip-Animation des Elements einmal gespiegelt, wenn sie nicht festgelegt ist. Wir können das Attribut „animation-iteration-count“ verwenden, um festzulegen, wie oft das Element animiert wird. Das Attribut „animation-iteration-count“ definiert die Häufigkeit, mit der die Animation abgespielt wird.

Die Syntax lautet wie folgt:

animation-iteration-count: n|infinite;

Das Beispiel lautet wie folgt:

<!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>
img{
animation:fadenum 5s ;
animation-iteration-count:2;
}
@keyframes fadenum{
   100%{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<img  src="1115.08.png" alt="So erzielen Sie in CSS3 zweimal einen Flip-Effekt" >
</body>
</html>

Ausgabeergebnis:

(Lernvideo-Sharing: So erzielen Sie in CSS3 zweimal einen Flip-EffektCSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie in CSS3 zweimal einen Flip-Effekt. 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