Giro de imágenes activado al pasar el mouse

Incorporar un comportamiento dinámico en sus páginas web, como rotaciones de imágenes al pasar el mouse, puede mejorar la participación del usuario. Para lograr este efecto con CSS en una imagen con un borde circular, sigue estos pasos:

1. Transiciones CSS3 con rotar()

Utilice transiciones CSS3 para rotar suavemente la imagen al pasar el mouse. La propiedad de transición define la duración y la función de aceleración de la animación. En este caso, establecemos la duración de la transición en 0,7 segundos y especificamos una función de aceleración de entrada y salida.

img {
  transition: transform .7s ease-in-out;
}

2. Transformación al pasar el mouse

Para rotar la imagen al pasar el mouse, usamos la propiedad de transformación con la función rotar() para establecer el ángulo de rotación deseado. En este ejemplo, rotamos la imagen 360 grados.

img:hover {
  transform: rotate(360deg);
}

3. Implementación de HTML

Dentro de su código HTML, coloque un elemento de imagen con la fuente y el tamaño apropiados.

Código de muestra

Aquí hay un ejemplo de código completo que muestra la imagen giratoria efecto:

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

Con este código, cada vez que el usuario pasa el cursor sobre el imagen, girará 360 grados suavemente.