Maison > Article > interface Web > Quel est le code de l'effet d'animation de rotation 3D en HTML5
Quel est le code de l'effet d'animation de rotation 3D en HTML5
- WBOYoriginal
- 2022-01-23 14:46:513791parcourir
En HTML5, le code de l'effet d'animation de rotation 3D est "element {animation: name time}@keyframes name {100%{transform:rotate3d(x, y, z, rotation angle);}}" ; est utilisé Spécifie les propriétés d'animation de l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.
Qu'est-ce que le code de l'effet d'animation de rotation 3D en HTML5 ?
Vous pouvez utiliser l'attribut d'animation et les règles @keyframes pour obtenir l'effet d'animation de la mise à l'échelle des éléments. Grâce aux règles @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. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.
Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.
Il existe également un attribut de transformation utilisé pour définir l'effet de mise à l'échelle des éléments. La propriété transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.
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>
div{
width:100px;
height:100px;
background-color:pink;
overflow:hidden;
animation:fadenum 5s ;
}
@keyframes fadenum{
100%{transform:rotateY(70deg);}
}
</style>
</head>
<body>
<div><img src="1118.02.png" alt=""></div>
</body>
</html>Résultat de sortie :
Tutoriel recommandé : "Tutoriel vidéo HTML"
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!