Animaciones en 3D con CSS3

Una de las grandes ventajas de los avances en programación web es que actualmente podemos realizar tareas que antes requerían algún tipo de soporte externo, como la utilización de Java (los famosos applets) para realizar animaciones (prácticamente desaparecido para este fin) o flash (en desuso) a favor del uso de las tecnologías existentes y “100% web-nativas” como pueden ser Javascript y CSS.

En el caso de las animaciones, el mundo de las 3D se puede decir que aún está en pañales, pero poco a poco se van facilitando las cosas a los desarrolladores para que con muy pocas lineas de código se consigan efectos sorprendentes.

Un ejemplo de esto es jQuery que proporciona una interfaz sencilla de utilizar para realizar animaciones (en 2D principalmente) espectaculares.

Si a Javascript le unimos la potencia de CSS3 a la hora de transformar o animar capas en nuestra web tenemos un gran abanico de posibilidades con muy pocas lineas de código.

El siguiente ejemplo es una gran muestra de ello, pego sólo el código como muestra, el código original y la demo la podéis encontrar aquí:

Entrada original:

http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

Demo:

http://www.paulrhayes.com/experiments/cube-3d/

Be Sociable, Share!


Los comentarios están cerrados.