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:
Este contenido es exclusivo para los usuarios de pago de la web.
Si ya lo eres accede a tu cuenta, y si aún no te has suscrito, regístrate desde aquí.
¡Nos vemos dentro!
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:
Este artículo ha sido visitado: 6 veces
Obtén acceso a los secretos mejor guardados de WordPress con solo un clic
Suscríbete a la newsletter y recibe en tu correo electrónico 10 snippets de código exclusivos que nunca se han publicado en nuestra membresía y que nunca se publicarán.
Obtén la ventaja definitiva en WordPress y conviértete en un experto.
10 códigos para WordPress, Divi y WooCommerce, que nunca han sido publicados aquí, ni se publicarán
Deja que WordPress trabaje por ti, utiliza código.