Saltar al contenido

Efecto de escala y rotación en CSS3

8 mayo, 2018
Efecto de escala y rotación en CSS3

Vamos a aprender a crear un efecto de escala y rotación en CSS3 sobre una imagen sin necesidad de ningún plugin externo, con lo cual ahorraremos bastantes líneas de código y mejoraremos la velocidad de carga de nuestra página. ¡Vamos a ello!

Efecto de escala y rotación en CSS3

Realizar un pequeño zoom y rotación sobre una imagen cuando el usuario pasa por encima con el cursor del ratón nos genera una mejor experiencia de navegación, además de un diseño más elegante.

Existen múltiples opciones para realizar este efecto, pero como os comentaba anteriormente vamos a prescindir de plugins externos, y lo haremos con CSS puro.

 

Menú de Navegación Adaptable con Rotación

 

El Html

Comenzamos como de costumbre con nuestro archivo html. Crearemos tres cajas con nuestras imágenes y le aplicaresmos las clases title1, title2 y title3 para procesarlas con CSS.

El CSS3

Aquí crearemos nuestro efecto de escala y rotación en CSS3.

Conclusión

Como véis es muy fácil crear un efecto de rotación y zoom sobre una imagen únicamente con CSS3.

Prescindimos del uso de librerías externas para evitar ralentizar nuestra web y mejorar su rendimiento en general.

Para finalizar os recomendaría que no utilizarais el copiar y pegar para este ejemplo. Teclea el código y ve los resultados poco a poco, así aprenderás a interpretarlo y poder incluso mejorarlo.

¿Te ha resultado de utilidad? Déjame tus dudas o sugerencias en los comentarios o redes sociales, y no olvides compartir para que tus amigos aprendan también. ¡Gracias!