Comment créer une image tournante ou animée en survol avec CSS ?

Comment créer une image tournante ou rotative animée au survol avec CSS

La rotation ou la rotation d'images en survol est un effet courant et visuellement attrayant qui améliore l’engagement des utilisateurs. Pour obtenir cet effet en utilisant CSS, suivez ces étapes :

Tout d'abord, assurez-vous que l'image a une bordure circulaire. Cela peut être fait en définissant border-radius sur 50 %, comme le montre le code suivant :

<code class="css">img {
  border-radius: 50%;
}</code>

Ensuite, ajoutez des animations CSS3 à la propriété de transformation de l'image. transition permet des transitions fluides entre les états, tandis que rotate() applique l'effet de rotation souhaité :

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

Dans cet exemple, l'image pivote de 360 ​​degrés au survol, créant un effet de rotation fluide. Vous pouvez ajuster l'angle de rotation() pour personnaliser le degré de rotation.

À des fins de démonstration, voici un exemple d'extrait de code HTML :

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

En combinant ces éléments CSS et HTML, vous pouvez créer efficacement une image tournante ou rotative animée par survol.

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!