Dentro de las muy interesantes novedades que introduce CSS3 encontramos las opciones para simular efectos 3D.

La propiedad perspective es la que nos abre el camino para crear perspectivas utilizando reglas introducidas por CSS3.

Desde un elemento “root” o “padre” podremos afectar a sus hijos para que tengan una perspectiva que simule un efecto 3D.

Por el momento esta característica es soportada por navegadores Chrome y Safari en sus versiones más modernas, por esta razón será recomendable utilizar el prefijo webkit, si empleamos esta funcionalidad en nuestros proyectos.

¿Un ejemplo? Veamos a continuación como construimos las reglas desde el elemento root:

perspective:250;
-webkit-perspective:250;


También podremos indicar el origen, como vemos a continuación:


perspective-origin: 25% 25%;
-webkit-perspective-origin: 25% 25%;


Trabajando con otras opciones de transformación y rotación, podremos lograr efectos muy interesantes en nuestros diseños.

¿Te ha resultado útil esta información? ¿Quieres saber más sobre HTML5 y CSS3? Escríbenos.