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:
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:
Deja que WordPress trabaje por ti, utiliza código.