CSS pour implémenter une animation de rotation d'image

Dans la conception de sites Web, les images sont l'un des éléments indispensables. Afin de rendre la page Web plus intéressante et attrayante, nous pouvons utiliser la technologie d'animation CSS3 pour ajouter des effets d'animation de rotation aux images. Ensuite, cet article expliquera comment utiliser CSS pour implémenter une animation de rotation d'image.

1. Étapes

Pour réaliser une animation de rotation d'image, nous devons suivre les étapes suivantes :

1. Ajouter une balise d'image en HTML :

Tout d'abord, ajoutez une balise d'image en HTML. Par exemple :

2. Définissez le style de l'image en CSS :

Deuxièmement, définissez le style de l'image en CSS. Par exemple :

img{
width: 200px; //Définissez la largeur de l'image sur 200px
height: 200px; //Définissez la hauteur de l'image sur 200px
border-radius: 50%; pour être circulaire
transition : tous 0,5 s ; // Définissez la durée de l'animation de l'image sur 0,5 seconde
}

3. Ajoutez l'effet d'animation de rotation :

Enfin, ajoutez le code pour l'effet d'animation de rotation en CSS. Par exemple :

img:hover{

transform: rotate(360deg);   //设置图片旋转360度

}

2. Analyse du code

Dans le code ci-dessus, nous utilisons l'attribut transform de CSS3 pour réaliser la rotation de l'image. L'attribut transform peut obtenir divers effets de transformation, notamment la rotation, la mise à l'échelle, la translation, etc. Ici, nous utilisons transform: rotate(360deg) pour obtenir l'effet d'animation de rotation de l'image. Parmi eux, rotate(360deg) signifie que l'image doit être pivotée de 360 ​​degrés.

De plus, nous utilisons également l'attribut de transition pour contrôler la durée de l'animation. L'attribut transition est un moyen d'implémenter des effets de transition CSS, qui peuvent contrôler le style d'un élément pour passer en douceur d'un état à un autre. Ici, nous définissons la transition : toutes les 0,5 secondes, ce qui signifie que tous les changements d'attributs prendront 0,5 seconde pour une transition en douceur.

Enfin, nous avons utilisé transform: rotate(360deg) dans le sélecteur img:hover pour obtenir l'effet de rotation de l'image lorsque la souris survole.

3. Code complet

Ce qui suit est le code CSS complet, y compris le style d'image et l'effet d'animation de rotation :

img{
largeur :
hauteur : 200px ; tous 0,5 s
}

img:hover{

transform: rotate(360deg);   

}

IV Résumé

Dans cet article, nous avons présenté comment utiliser CSS pour obtenir des effets d'animation de rotation d'image. En utilisant l'attribut transform et l'attribut transition de CSS3, nous pouvons facilement obtenir l'effet de rotation de l'image. Faites confiance à cette astuce simple pour rendre votre page Web plus attrayante et intéressante.

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!