Efecto 3D Aplicación
Vamos a ver las clases CSS que provee la biblioteca para generar un efecto 3D que mantiene oculta
un elemento hasta que el usuario pasa el cursor por el elemento que se encuentra visible.
Es necesario para realizarle ajustes al diseño tener en cuenta clases ya documentadas para poder
alinear de manera correcta el contenido.
Muestra
Cara Delantera
Pequeña descripciónEsto es el contenido del elemento que se ve de frente
Este texto queda por oculto por detrás de la figura que se muestra de frente.
Cara Delantera
Pequeña descripción
Esto es el contenido del elemento que se ve de frente
Este texto queda por oculto por detrás de la figura que se muestra de frente.
Se recomienda al lector ver:
Estructura Básica
Todo el contenido del efecto va a estar encerrado en la clase .contenedor-efecto3d que va a contener otra clase que se denomina contenedor-[giro] donde giro puede ser horizontal o vertical, luego dentro de esta última de añadirán las clases .adelante (Con lo que queda a la vista) y .atras-[giro] donde giro es horizontal o vertical.
La estructura que se muestra en el código de arriba es básica y funcional pero hay que tener en cuenta que cuando se ponga en práctica es necesario ajustar el contenido de las partes involucradas para que de mantengan dentro de los límites del contenedor. Esto se logra a través de la aplicación de las clases de alineamiento provistas por Bodystyle.
Ejemplo simple
Vamos a realizar un ejemplo simple con dos textos, uno por delante y otro por detras con fondos de colores distintos y utilizando las clases bordes predefinidas.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsam molestiae aut hic sit perferendis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsam molestiae aut hic sit perferendis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsam molestiae aut hic sit perferendis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsam molestiae aut hic sit perferendis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsam molestiae aut hic sit perferendis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsam molestiae aut hic sit perferendis.
Ejemplo Complejo
En este ejemplo se va a simular el efecto 3D con dos tarjetas vistas en esta documentación. En este caso es un ejemplo más complejo en el cual se utiliza la grilla, el contenedor, las tarjetas y ciertas funcionalidades de alineamiento que provee bodystyle.
Autos en Venta
Renault 206Lorem ipsum dolor sit amet consectetur adipisicing elit
Titulo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, hic.
Autos en Venta
Renault 206Lorem ipsum dolor sit amet consectetur adipisicing elit
Titulo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, hic.
Autos en Venta
Renault 206
Lorem ipsum dolor sit amet consectetur adipisicing elit
Titulo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, hic.
Autos en Venta
Renault 206
Lorem ipsum dolor sit amet consectetur adipisicing elit
Titulo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, hic.