Un efecto de rotación de desplazamiento en las imágenes puede hacer que su contenido sea más atractivo e interactivo. En este tutorial, le mostraremos cómo crear un efecto de rotación de desplazamiento simple pero llamativo usando solo HTML y CSS.

Cómo crear el efecto

HTML:

Primero, agregue el siguiente código HTML:

Puedes agregar cualquier imagen que quieras.

Este código configura una imagen envuelta en una etiqueta con una clase de rotación flotante.

CSS:

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}
.hover-rotate img {
  transition: all 0.3s;
  max-width: 100%;
}
.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

Cómo funciona:

La etiqueta

La clase .hover-rotate establece las dimensiones de la imagen y oculta cualquier desbordamiento. La clase img .hover-rotate maneja el efecto de transición suave.

Cuando pasas el cursor sobre la imagen, su escala aumenta 1,3 veces y gira 5 grados, gracias a la propiedad de transformación.

Si este tutorial te resultó útil, no dudes en compartirlo con otras personas o dejar un comentario a continuación. Para obtener más consejos y trucos sobre diseño web, asegúrese de consultar nuestras otras publicaciones.

Visita mi sitio web para ver más tutoriales como este