Saltar al contenido

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);
  }
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *