Introducción
Durante mucho tiempo, las aplicaciones de escritorio el 3D ha sido precavido. Recientemente, con la introducción de los smartphones avanzados con acceso a la aceleración de GPU nativa, hemos comenzado a ver el uso del 3D en casi todas partes.
Por lo general, el modo 3D se utiliza principalmente como dispositivo para jugar o para algunas interfaces de usuario avanzadas. No fue hasta la introducción de las transformaciones Perspective 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 3D no es exactamente fácil).
En marzo de 2009, se introdujo el Modelo de transformación 3D en CSS como una especificación de borrador para permitir a los desarrolladores web crear interfaces de usuario interesantes y atractivas que aprovechen las funciones 3D, ya que permiten que los autores de aplicaciones apliquen transformaciones de perspectiva en 3D a cualquier elemento visual del DOM.
El borrador de trabajo de transformación 3D de CSS es una extensión lógica del Modelo de transformación 2D de CSS, que introduce 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 es necesario ser un experto en matemáticas para crear elementos en 3D.
Ten en cuenta que el módulo CSS 3D está diseñado para ayudar a los desarrolladores a compilar aplicaciones enriquecidas y visualmente interesantes, no para permitirte crear mundos en 3D inmersivos.
Compatibilidad con navegadores y aceleración de hardware
-webkit-perspective
-webkit-transform-3d
La información importante que debes recordar es que, si bien un navegador puede "admitir" 3D, es posible que no pueda renderizar 3D debido a limitaciones de hardware y controladores. Las escenas 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é ocurre con la detección de funciones? Esperaba que no me preguntes. Los desarrolladores han usado herramientas como Modernizr para detectar la compatibilidad con funciones y capacidades específicas de los navegadores. Si bien es posible detectar la presencia de compatibilidad con transformaciones 3D, no es posible detectar la presencia de aceleración de hardware, y esta es el ingrediente clave.
Muestra básica
No hay nada mejor que ir directo al grano. En este ejemplo, aplicaremos un conjunto básico de rotaciones de un elemento arbitrario del DOM.
Para comenzar, se define una perspectiva sobre el elemento raíz.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
La Perspective es importante porque define cómo se representa la profundidad de la escena 3D, los valores del 1 al 1000 producen un efecto muy pronunciado y los valores superiores a 1,000 son menos. Luego, agregamos un iframe y aplicamos una rotación de 30 grados alrededor de los ejes Z e Y.
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
¡BAM! Es decir, el elemento es totalmente interactivo y, en todos los aspectos, es un elemento del DOM de principio a fin (excepto que ahora se ve aún mejor). Si tu navegador no admite las transformaciones 3D, no pasará nada. Solo verás un iframe simple sin rotación. Si tu navegador admite transformaciones en 3D, pero sin aceleración de hardware, puede parecer un poco extraño.
Animación
Lo que me encanta de las transformaciones 3D de CSS3 es que se vinculan muy bien con el módulo de transición de CSS. Las animaciones y transiciones son fáciles de definir en CSS, y aplicarlas a 3D no es una excepción.
Es fácil animar elementos que tienen aplicada una perspectiva 3D. Simplemente configura el estilo de "transición" como "transformación", adjunta una duración y una función de animación. A partir de ese momento, se animará cualquier cambio que se realice en el estilo "transformación".
Refactorizamos los ejemplos anteriores para usar estilos de documento, en lugar de estilos intercalados. No solo aclara el ejemplo, sino que también permite que la muestra aproveche el seudoselector :hover. Con el selector :hover, se pueden iniciar las transiciones simplemente moviendo el mouse sobre el elemento. Excelente.
Resumen
Este fue un breve resumen de algunos de los efectos geniales que se pueden aplicar a cualquier elemento visible del DOM mediante transformaciones CSS 3D. Aún hay muchas tareas que se pueden hacer que no se trataron en este instructivo.