Méthode : 1. Utilisez l'attribut d'animation pour lier l'animation de retournement à l'élément de carte ; 2. Utilisez la règle "@keyframes" et l'attribut de transformation pour définir l'action d'animation de retournement de l'élément. La syntaxe est "@keyframes name {100%". {transform:rotateY(angle de retournement);}}".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
L'attribut de transformation applique une transformation 2D ou 3D aux éléments. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.
rotateX(angle) définit une rotation 3D le long de l'axe X.
rotateY(angle) définit une rotation 3D le long de l'axe Y.
rotateZ(angle) définit une rotation 3D le long de l'axe Z.
Avec la règle @keyframes, vous pouvez créer des animations.
Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. L'attribut
animation est un attribut raccourci permettant de définir six attributs d'animation :
animation: name duration timing-function delay iteration-count direction;
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 ;
}
@keyframes fadenum{
100%{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<img src="1118.01.png" style="max-width:90%" alt="Comment obtenir un effet de retournement de carte en CSS3" >
</body>
</html>Résultats de sortie
(Partage vidéo d'apprentissage : tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
