Tournage d'image activé au 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 au survol. La propriété transition définit la durée et la fonction d'assouplissement de l'animation. Dans ce cas, nous définissons la durée de transition sur 0,7 seconde et spécifions une fonction d'assouplissement de l'entrée et de la sortie.

img {
  transition: transform .7s ease-in-out;
}

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.

img:hover {
  transform: rotate(360deg);
}

3. Implémentation HTML

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

Exemple de code

Voici un exemple de code complet illustrant l'image tournante effet :

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

Avec ce code, chaque fois que l'utilisateur survole le image, elle pivotera à 360 degrés en douceur.