Este efecto consiste en hacer rotar el contenido para revelar información que se encuentra detrás, se puede lograr usando CSS3 enteramente. Decidí llamarlo efecto tarjeta ya que guarda semejanza con una tarjeta girando en el mundo real
En el tutorial que acabas de ver aprenderás a hacer un efecto 3D bastante atractivo, con elementos "DIV" ubicados de forma estratégica lograremos crear un Cubo y le daremos una efecto de rotación en 3D.
A continuación podrás descargar el código fuente, y más abajo te recomiendo que leas una explicación escrita acerca de la propiedad "perspective" ya que algunas cosas se me pudieron pasar por alto.
Acerca de los enlaces para descargar: Tienen un pequeño anuncio publicitario, patrocinado por "adfly" luego de hacer clic puedes undir en saltar publicidad para ir al código fuente. Este patrocinio me ayuda a poder producir este material, si la publicidad te parece muy molesta comentalo inmediatamente para yo buscar una mejor forma de trabajar, ya que ante todo está tu comodidad
Este es un concepto muy difícil de entender, ya en el video explique como funciona, ahora aquí voy a resaltar algunos detalles a tener en cuenta
La perspectiva se aplica al objeto PADRE no al objeto al que quieras modificar, esta es una de las cosas que mas confunde. Si quieres mostrar un "div" con efecto de perspectiva, deberás poner este "div" dentro de otro "div" padre, y es a este "div" al que se le va a pasar la propiedad "perspective"
Dentro del universo CSS las leyes de la física son parecidas pero no iguales, el valor en pixeles que se le pasa a la propiedad "perspective" significa "distancia" te estas alejando del objeto en cuestión, pero a diferencia del mundo real no se va a ver aparentemente mas pequeño, si no que siempre va a encajar en las medidas "width" y "height" que hayamos predefinido
"perspective-origin" con esta propiedad podemos definir desde donde los estamos viendo, se le pasan dos valores, un "x" y un "y", este va a ser nuestro "punto de vista"
