Animación Cubo 3D CSS3

Para ver en Youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides Suscribirte)
Para ver más videos de CSS3 clic aquí

Animación de Cubo 3D rotando

    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

Código fuente

Clic aquí para descargar el código fuente del tutorial

Perspectivas en CSS3

  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

1. 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"
2. 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
3. "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"

Más información acerca de las perspectivas clic aquí para ir al sitio de MDN

  Esta explicación de aquí arriba me parece muy buena y está en español