Maison > Article > interface Web > Comment obtenir un effet de retournement de carte en CSS3

Comment obtenir un effet de retournement de carte en CSS3

WBOYoriginal: 2022-03-22 16:41:222708parcourir

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.

Comment obtenir un effet de retournement de carte en CSS3

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

Comment obtenir un effet de retournement de carte en CSS3

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

html5 css css3 transform animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelles bases de données le nœud peut-il utiliser ?Article suivant：Quelles bases de données le nœud peut-il utiliser ?

Articles Liés

Voir plus