Comment faire tourner une image au survol avec CSS ?

Transformer une image au survol : rotation ou rotation

Obtenir l'effet d'une image en rotation au survol avec CSS nécessite l'utilisation de transitions CSS3 et du propriété rotate(). Examinons la solution :

La propriété de transition définit comment un élément doit changer au fil du temps. Ici, transform .7s easy-in-out indique que la transformation (rotation) devrait prendre 0,7 seconde et doit suivre une courbe d'assouplissement.

La propriété transform est responsable de la modification de la position, de la taille ou de la rotation de l'élément. transform: rotate(360deg) indique au navigateur de faire pivoter l'image de 360 ​​degrés lorsque l'état :hover est déclenché.

Voici le code mis à jour :

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

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

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

Ce code ajoute une animation fluide à l'image, la faisant pivoter une fois lorsque le curseur la survole. Vous pouvez personnaliser la valeur de rotation pour contrôler l'angle de rotation ou ajuster les paramètres de transition pour modifier la vitesse et l'accélération de l'animation.

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!