3D y CSS

Paul Kinlan

Introducción

Durante mucho tiempo, el 3D fue exclusivo de las aplicaciones 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 de 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, que 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 han reducido la barrera de entrada. Ya no tienes que ser un genio matemático para crear elementos en 3D.

Debes tener en cuenta que el módulo 3D de CSS está diseñado para ayudar a los desarrolladores a crear aplicaciones enriquecidas y visualmente interesantes, no está diseñado para permitirte crear mundos 3D inmersivos.

Compatibilidad con navegadores y aceleración de hardware

-webkit-perspective

Navegadores compatibles

• 36
• 12
• 16
• 9

Origen

-webkit-transform-3d

Navegadores compatibles

• 2
• 12
• 49
• 4

Origen

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 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 para transformaciones en 3D, no es posible detectar la presencia de aceleración de hardware, y esta 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 arbitrario del DOM.

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 de más de 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! Es decir, el elemento es completamente interactivo y, en todo sentido, es un elemento del 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 configura el estilo "Transition" para que sea "transform" y adjunta una duración y una función de animación. A partir de ese momento, se animarán todos los cambios en el estilo “tranforme”.

Volvemos a factorizar los ejemplos anteriores para usar estilos de documentos en lugar de estilos intercalados. No solo borra el ejemplo, sino que permite que la muestra aproveche el seudoselector :hover. Con el selector :hover, se pueden iniciar transiciones con solo mover 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.