Efecto para voltear una carta en 3D con CSS3

Uno de los efectos que recientemente me llamaron poderosamente la atención es el efecto de tarjeta que gira 180 grados con un efecto 3D en el cuál se muestra otra información, algo como lo que tenía iOS cuando usábamos el Cover Flow y seleccionabas un álbum. Siempre fui fan de ese efecto y a lo largo del tiempo he visto que muchos suelen recrear el efecto para diferentes propósitos y la verdad es que se ve muy bien.

En este tutorial vamos a recrear justo ese efecto, el de voltear una carta en 3D con CSS3. Hay ciertas cosas que se tienen que aclarar, por ejemplo el hecho de que el tutorial funciona casi exclusivamente con Safari y Chrome porque hasta el momento Firefox y los demás navegadores no tienen implementadas algunas funciones 3D en CSS3 que permiten tener el efecto.

Nivel de dificultad: Intermedio

Demo del tutorial

HTML

Necesitamos entender que como siempre tenemos un contenedor para tener bien definido el límite de nuestra carta. Después hay otro contenedor que va a ser el responsable de hacer girar los dos lados de la carta. Después dentro de esa capa tenemos las dos capas que actúan de caras.

CSS

El contenedor tiene un papel importante ya que tiene la propiedad perspective que permite hacer girar y hacer un efecto 3D a nuestra carta, ya que de otra forma sólo giraría en torno al eje Y pero como sin un ángulo.

Ahora sigue el siguiente contenedor el cuál también tiene una propiedad para preservar el 3D de sus hijos. Pudimos haber puesto esta propiedad desde el primer contenedor pero como realmente este es el contenedor más cercano es más eficiente. Después añadimos la propiedad de transición y le decimos que cuando haya un hover en el primer container se gire la cara 180 grados en dirección Y, o sea, de izquierda a derecha.

Justamente el backface visibility permite esconder una capa en caso de que vaya a ser rotada, y puesto que la parte de atrás la giramos 180 grados tenemos ya lista nuestra carta para darle vuelta inmediatamente que le pongamos el mouse encima.