Comment obtenir un effet flip deux fois en CSS3-tutoriel CSS-php.cn

Comment obtenir un effet flip deux fois en CSS3

WBOY

Libérer： 2021-12-16 10:16:57

original

1899 Les gens l'ont consulté

Méthode : 1. Utilisez l'instruction "@keyframes name {100%{transform:rotateY(angle);}}" pour définir l'effet d'animation du retournement de l'élément ; 2. Utilisez l'instruction "Element {animation-iteration-count : 2}" instruction pour le définir. Le nombre de retournements d'animation d'élément est de 2 fois.

Comment obtenir un effet flip deux fois en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment obtenir l'effet de retourner deux fois un élément en CSS3

En CSS, si vous souhaitez obtenir l'effet de retourner un élément deux fois, vous pouvez utiliser la règle "@keyframes", les attributs d'animation et de transformation pour définir l'effet d'animation du retournement de l'élément.

À ce stade, l'animation de retournement de l'élément sera inversée une fois si elle n'est pas définie. Nous pouvons utiliser l'attribut animation-iteration-count pour définir le nombre de fois que l'élément est animé. L'attribut

animation-iteration-count définit le nombre de fois que l'animation est jouée.

La syntaxe est la suivante :

animation-iteration-count: n|infinite;

Copier après la connexion

L'exemple est le suivant :

<!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="Comment obtenir un effet flip deux fois en CSS3" >
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment obtenir un effet flip deux fois en CSS3