3D y CSS

bookmark_border Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Paul Kinlan

Introducción

Durante mucho tiempo, el 3D fue un recurso exclusivo de las aplicaciones para computadoras de escritorio. Recientemente, con la introducción de smartphones avanzados que tienen acceso a la aceleración nativa de la GPU, comenzamos a ver el uso del 3D en casi todas partes.

Por lo general, el 3D se usa principalmente como dispositivo para juegos o algunas interfaces de usuario avanzadas. No fue hasta la introducción de las transformaciones de perspectiva en WPF y Silverlight que un modelo adecuado para aplicar efectos 3D a los elementos de la interfaz de usuario se convirtió en una solución práctica para los desarrolladores de aplicaciones (después de todo, el 3D no es exactamente fácil).

El modelo de transformación 3D de CSS se presentó como una especificación de borrador en marzo de 2009 para permitir que los desarrolladores web crearan interfaces de usuario interesantes y atractivas que aprovecharan la tecnología 3D, ya que permite que los autores de aplicaciones apliquen transformaciones de perspectiva 3D a cualquier elemento visual del DOM.

El borrador de trabajo de transformación en 3D de CSS es una extensión lógica del modelo de transformación en 2D de CSS y presenta algunas propiedades adicionales, como perspectivas, rotaciones y transformaciones en un espacio 3D.

Nunca antes habíamos podido crear interfaces 3D con tanta facilidad. Estas tecnologías redujeron la barrera de entrada. Ya no tienes que ser un genio matemático para crear elementos en 3D.

Cabe señalar que el módulo CSS 3D está diseñado para ayudar a los desarrolladores a crear aplicaciones interesantes y visualmente atractivas, no para permitirte crear mundos 3D envolventes.

Compatibilidad con navegadores y aceleración de hardware

-webkit-perspective

-webkit-transform-3d

Es importante recordar que, aunque un navegador pueda “admitir” contenido en 3D, es posible que no pueda renderizarlo debido a limitaciones de hardware y controladores. Las escenas en 3D basadas en el DOM pueden ser muy costosas en términos de procesamiento y, por lo tanto, los proveedores de navegadores decidieron que, en lugar de ralentizar los navegadores con una solución de renderización de software pura, aprovecharán la GPU, que podría no estar disponible en todas las plataformas.

Detección de atributos

¿Qué sucede con la detección de componentes? Esperaba que no me lo preguntaras. Los desarrolladores han estado usando herramientas como Modernizr para detectar la compatibilidad con funciones y capacidades específicas del navegador. Si bien es posible detectar la presencia de compatibilidad con transformaciones 3D, no es posible detectar la presencia de aceleración de hardware, que es el ingrediente clave.

Ejemplo básico

No hay nada mejor que comenzar a usarla. En este ejemplo, aplicaremos un conjunto básico de rotaciones de un elemento DOM arbitrario.

Comenzamos por definir una perspectiva en el elemento raíz.

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

La perspectiva es importante porque define cómo se renderiza la profundidad de la escena 3D. Los valores de 1 a 1,000 producirán un efecto muy pronunciado, y los valores superiores a 1,000 menos. Luego, agregamos un iframe y aplicamos una rotación de 30 grados alrededor del eje Z e Y.

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

¡BAM! Eso es todo, el elemento es completamente interactivo y, en todos los aspectos, es un elemento DOM completo (excepto que ahora se ve aún mejor). Si tu navegador no admite transformaciones 3D, no sucederá nada. Solo verás un iframe simple sin rotación aplicada. Si tu navegador admite transformaciones 3D, pero sin aceleración de hardware, es posible que se vea un poco extraño.

Animación

Lo que me encanta de las transformaciones 3D de CSS3 es que se vinculan de forma muy elegante con el módulo de transición de CSS. Las animaciones y las transiciones son fáciles de definir en CSS, y aplicarlas a 3D no es una excepción.

Animar elementos a los que se les aplicó una perspectiva 3D es fácil. Simplemente establece el estilo de "transition" en "transform", adjúntalo a una duración y a una función de animación. A partir de ese momento, cualquier cambio en el estilo "transform" se animará.

Volvemos a factorizar los ejemplos anteriores para usar estilos de documentos en lugar de estilos intercalados. No solo aclara el ejemplo, sino que permite que el ejemplo aproveche el selector pseudo :hover. Con el selector :hover, se pueden iniciar transiciones simplemente moviendo el mouse sobre el elemento. ¡Genial!

Resumen

Esta fue solo una vista rápida de algunos de los efectos geniales que se pueden aplicar a cualquier elemento DOM visible con las transformaciones 3D de CSS. Aún hay muchas cosas que se pueden hacer y que no se abordaron en este instructivo.