Girar o rotar una imagen al pasar el mouse

Solución:

Puede utilizar transiciones CSS3 con rotate() para girar la imagen al pasar el mouse.

Imagen giratoria:

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

Aquí hay una DEMO de violín

---

Más información y referencias:

• una guía sobre las transiciones CSS en MDN
• una guía sobre las transformaciones CSS en MDN
• tabla de soporte del navegador para transformaciones 2d en caniuse.com
• tabla de soporte del navegador para transiciones en caniuse.com

Es muy simple.

1. Agrega una imagen.

2. Creas una propiedad CSS para esta imagen.

   img { transition: all 0.3s ease-in-out 0s; }
   

3. Agrega una animación como esa:

   img:hover
   {
       cursor: default;
       transform: rotate(360deg);
       transition: all 0.3s ease-in-out 0s;
   }
   

si desea rotar elementos en línea, debe configurar el elemento en línea en inline-block primero.

i {
  display: inline-block;
}

i:hover {
  animation: rotate-btn .5s linear 3;
  -webkit-animation: rotate-btn .5s linear 3;
}

@keyframes rotate-btn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

---

---

Utiliza Nuestro Buscador