Comment créer une rotation d'image activée par le survol avec CSS ?

Tournage d'image activé par le survol

L'intégration d'un comportement dynamique dans vos pages Web, comme la rotation des images au survol, peut améliorer l'engagement des utilisateurs. Pour obtenir cet effet avec CSS sur une image avec une bordure circulaire, suivez ces étapes :

1. Transitions CSS3 avec rotate()

Utilisez les transitions CSS3 pour faire pivoter en douceur l'image en survol. La propriété transition définit la durée et la fonction d'assouplissement de l'animation. Dans ce cas, nous fixons la durée de transition à 0,7 seconde et spécifions une fonction d'assouplissement d'entrée-sortie.

<code class="css">img {
  transition: transform .7s ease-in-out;
}</code>

2. Transformation en survol

Pour faire pivoter l'image en survol, nous utilisons la propriété transform avec la fonction rotate() pour définir l'angle de rotation souhaité. Dans cet exemple, nous faisons pivoter l'image de 360 ​​degrés.

<code class="css">img:hover {
  transform: rotate(360deg);
}</code>

3. Implémentation HTML

Dans votre code HTML, placez un élément d'image avec la source et la taille appropriées.

<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>

Exemple de code

Voici un exemple de code complet illustrant l'effet d'image qui tourne :

<code class="css">img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>

Avec ce code, chaque fois que l'utilisateur survole l'image, celle-ci pivote de 360 degrés en douceur.

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!