Comment faire tourner une image au survol avec CSS ?

Tournage d'images déclenché par le survol

Pour de nombreuses applications Web, il est souhaitable d'ajouter des effets animés interactifs pour améliorer l'engagement des utilisateurs. L'un de ces effets consiste à faire tourner ou à faire pivoter une image lorsqu'un utilisateur la survole. Cet article montre comment obtenir cette fonctionnalité en utilisant CSS sur une image circulaire.

Implémentation CSS pour la rotation d'image

Pour créer une image tournante au survol, vous pouvez utiliser les transitions CSS3 avec l'option 'rotate( )' propriété. L'extrait de code CSS suivant fournit les styles nécessaires :

<code class="css">img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>

Explication :

• La propriété 'transition' définit la durée et l'effet de transition pour le ' la propriété transform' change. Dans ce cas, la transition prendra 0,7 seconde avec un effet « facilité d'entrée et de sortie ».
• Lorsque l'utilisateur survole l'image, le style « survol » est appliqué.
• Le La propriété 'transform' avec 'rotate(360deg)' fait pivoter l'image de 360 ​​degrés, créant l'effet de rotation.

Application du style au HTML

Dans l'extrait de code HTML ci-dessous, un l'image est intégrée à l'aide de la balise 'img' :

<code class="html">&lt;img src=&quot;https://i.sstatic.net/BLkKe.jpg&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;</code>

En liant le code CSS à cette page HTML, l'image tournera lorsque l'utilisateur la survolera. Cela démontre une technique simple et efficace pour ajouter des éléments interactifs aux applications Web.

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!