Efecto 3D con CSS3
Hola a tod@os y saludos desde Espai.
Las transformaciones y transiciones de CSS3 permiten modificar la visualización, tanto en 2D como en 3D, y dar efectos de movimento sobre los elementos de una página web.
En este post vamos a ver una manera muy sencilla de conseguir un efecto 3d con css3. Giraremos una postal o carta utilizando las transformaciones y transiciones en CSS3. Podréis ver el resultado y alterar el código justo después de la explicación.
Para empezar montaremos nuestra estructura en HTML:
Con un div contenedor (wrapper) que lo englobe todo y nos permita definir los limites de la carta. Justo después añadiremos otro contenedor que será el responsable de voltear la carta (postal) y dentro de este dos contenedores mas que actuaran como caras (figure).
Y seguidamente editaríamos nuestro código CSS para dar el estilo y el efecto deseado
El contenedor (#wrapper) tiene un papel importante ya que tiene la propiedad perspective, que permite girar y hacer un efecto 3D a nuestra postal, ya que de otra forma sólo giraría en torno al eje Y pero como sin un ángulo.
Seguidamente en el contenedor #postal le asignaremos la propiedad para preservar el 3D de sus hijos (transform-style:preserve-3d). Después añadimos la propiedad de transición que se aplicará a las transformaciones y le decimos que cuando haya un hover en el primer contenedor se gire la cara 180 grados en el eje de las Y, o sea, de izquierda a derecha.
Por último trataremos el css de las caras. Las caras las posicionaremos de manera absoluta una encima de la otra y con la propiedad backface-visibility: hidden nos permitirà esconder una capa en el caso de que vaya a ser rotada. Fijaos que incialmente rotamos la trasera (back), por lo tanto no se verà.
Podéis consultar el código completo aquí para que experimenteis con él. Para los que no conozcáis CodePen, comentaros que es una herramienta online muy interesante que nos permite testear codigo html, css y javascript viendo el resultado en tiempo real.
Saludos desde el área web y hasta el próximo artículo!