LabEx
EntrarÚnete

Rotación de imagen al pasar el cursor

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, aprenderemos cómo crear un efecto de hover que rote una imagen utilizando propiedades de CSS. Al utilizar scale(), rotate() y transition, podemos hacer que la imagen parezca rotar cuando el usuario pase el cursor sobre el elemento padre. También utilizaremos overflow: hidden para ocultar lo que sobra de la transformación de la imagen, creando un efecto limpio y pulido.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 91%. Ha recibido una tasa de reseñas positivas del 88% por parte de los estudiantes.

Imagen que gira al pasar el cursor

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear un efecto de rotación para una imagen al pasar el cursor, utiliza las propiedades scale(), rotate() y transition al pasar el cursor sobre el elemento padre, que debe ser un elemento <figure>. Para garantizar que la transformación de la imagen no desborde del elemento padre, agrega overflow: hidden a la hoja de estilos del elemento padre. Aquí hay un ejemplo de código HTML y CSS:

<figure class="hover-rotate">
  <img src="https://picsum.photos/id/669/600/800.jpg" />
</figure>

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.hover-rotate img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Imagen que gira al pasar el cursor. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.