Cómo voltear una imagen

Tiempo estimado de lectura: 2 minutos

 

Efecto voltear una imagen

En esta ocasión veremos un efecto muy visual, se trata de voltear una imagen, con lo que daremos un aspecto de 3d bastante llamativo.

Como siempre, lo primero que vamos a hacer es utilizar un código CSS bastante sencillo y se lo aplicaremos a una imagen. ¡Vamos a ello!.

Código que vamos a utilizar

Como llevamos haciendo bastante tiempo, utilizaremos un sencillo código CSS y a continuación crearemos las estructura HTML para asignarle dicho código.

La idea es que cuando pasemos el cursor por encima de una imagen, esta se voltee sobre el eje vertical, con lo que el efecto que crearemos será como de estar delante de un espejo.

El código es el siguiente:

/* voltear una imagen */
#flip img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}

La propiedad CSS -webkit-transform permite transformar un elemento en un espacio bidimensional (2D) o tridimensional (3D). Sabiendo esto, nuestro código es bastante sencillo de entender, la propiedad transform muestra los cambios en el elemento (en este caso una imagen). El valor de scaleX (o scaleY) puede ser positivo o negativo, en este ejemplo, escala sobre el eje X con un valor de -1, con lo que, el objeto se invierte (refleja) respecto al eje Y.

El resultado es el siguiente:


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *