Comment créer un effet de rotation ou de rotation d'image en survol à l'aide de CSS ?

Émulation de la rotation ou de la rotation d'une image au survol à l'aide de CSS

Pour obtenir l'effet de rotation ou de rotation souhaité sur une image lors du survol, CSS peut être utilisé avec des propriétés et des transitions spécifiques . Voici comment cela pourrait être implémenté :

Implémentation du code

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

Dans le code HTML fourni, chaque élément de l'image est modifié à l'aide des styles CSS ci-dessus :

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

Explication

• Bordure-rayon : Définit l'image sur une forme circulaire (50 % de rayon de bordure).
• Transition : Définit la transition en douceur de la transformation de l'image au survol (fonction de durée et d'assouplissement).
• Transformation : Rotation : Au survol, la propriété de transformation de l'image est définie pour pivoter de 360 ​​​​degrés, la faisant tourner .

Cette implémentation CSS permet à l'image de pivoter en douceur autour de son centre lorsque la souris la survole.

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!