Cómo crear un efecto de panel que se despliega en 3D con CSS3

Hace unas semanas vimos como implementar la perspectiva en CSS3 para hacer un efecto de vuelta de carta para mostrar detrás de una capa más información, un efecto muy popular para practicar el 3D con CSS3.

En esta ocasión vamos a volver a utilizar el 3D pero para hacer un efecto más o menos parecido al anterior, sólo que en este caso construiremos una especie de panel que se despliegue delante de otro haciendo ver que se desdobla. Entonces, les dejo el tutorial sobre cómo crear un efecto de panel que se despliega en 3D con CSS3 y verán que en realidad se aplican los mismos estilos, nada más falta darle a uno de los paneles la capacidad de que se quede anclada de un lado para que no gire en un eje central.

Nivel de dificultad: Intermedio

Demo del tutorial

HTML

Esta es la estructura para nuestro ejercicio, no es la gran cosa pero si hay que tener en cuenta tener un contenedor principal y nuestras dos capas que actúan de paneles.

CSS

Lo importante del tutorial es configurar todo para que trabaje nuestro efecto de 3D, por lo cuál configuramos perspectiva, transiciones y las transformaciones como rotaciones para que el ejercicio funcione bien. Hasta este punto sólo configuro lo más importante para que funcione el efecto, los demás estilos los veremos abajo.

Para activar simplemente basta rotar nuestro segundo panel cuando  el cursor esté sobre el panel contenedor. Con esto habríamos terminado el tutorial, donde la parte más difícil en realidad es la rotación y la perspectiva para que cuando se rote el panel se vea bien.

Ahora, si les gustó la combinación que le hice para que se viera mejor también les dejo los estilos que ocupé, los pongo a parte para que no interfieran con el estilo general de las configuraciones.

¿Te gustó el tutorial?