Introdução
Por muito tempo, o 3D foi a reserva dos aplicativos desktop. Recentemente, com o lançamento dos smartphones avançados que têm acesso à aceleração de GPU nativa, começamos a ver o 3D usado em quase todos os lugares.
Normalmente, o 3D é usado principalmente como um dispositivo para jogos ou algumas interfaces de usuário avançadas. Só com o lançamento das transformações de perspectiva no WPF e no Silverlight que um modelo adequado para aplicar efeitos 3D a elementos da interface do usuário se tornou uma solução prática para desenvolvedores de aplicativos (afinal, o 3D não é exatamente fácil).
O CSS 3D Transform Model foi apresentado como uma especificação de rascunho em março de 2009 para permitir que desenvolvedores da Web criem interfaces de usuário interessantes e atrativas que aproveitam o 3D, permitindo que os autores de aplicativos apliquem transformações de perspectiva 3D em qualquer elemento DOM visual.
O CSS 3D Transformation Working Rascunho é uma extensão lógica do Modelo de transformação 2D do CSS, que introduz algumas propriedades adicionais, incluindo: perspectivas, rotações e transformações em um espaço 3D.
Nunca foi possível criar interfaces em 3D tão facilmente. Essas tecnologias reduziram a barreira à entrada. Você não precisa mais ser um gênio da matemática para criar elementos 3D.
É importante observar que o módulo CSS 3D foi projetado para ajudar os desenvolvedores a criar aplicativos avançados e visualmente interessantes, e não para permitir a criação de mundos 3D imersivos.
Suporte a navegadores e aceleração de hardware
-Perspectiva
-webkit-transform-3d
Uma informação importante a ser lembrada é que, embora um navegador possa "oferecer suporte" a 3D, ele pode não conseguir renderizar 3D devido a limitações de hardware e driver. As cenas 3D baseadas no DOM podem ser muito caras do ponto de vista computacional e, portanto, os fornecedores de navegador decidiram que, em vez de desacelerar os navegadores com uma solução pura de renderização de software, eles aproveitam a GPU que pode não estar disponível em todas as plataformas.
Detecção de recursos
E a detecção de recursos? Eu esperava que você não ia perguntar! Os desenvolvedores têm usado ferramentas como o Modernizr para detectar a compatibilidade com recursos e habilidades específicas do navegador. Embora seja possível detectar que houve suporte para transformações 3D, não é possível detectar a presença de aceleração de hardware, e ela é o ingrediente principal.
Amostra básica
Não há nada melhor do que ir direto ao ponto. Neste exemplo, aplicaremos um conjunto básico de rotações de um elemento DOM arbitrário.
Começamos definindo uma perspectiva no elemento raiz.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
A perspectiva é importante porque define como a profundidade da cena 3D é renderizada, os valores de 1 a 1000 produzem um efeito muito pronunciado e os valores acima de 1000 são menores. Em seguida, adicionamos um iframe e aplicamos uma rotação de 30 graus ao redor dos eixos Z e Y
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
BUM! Ou seja, o elemento é totalmente interativo e, em todos os aspectos, é um elemento DOM completo (exceto que agora tem uma aparência ainda mais legal). Se o navegador não for compatível com transformações 3D, nada acontecerá. Você verá apenas um iframe simples sem rotação aplicada. Se seu navegador for compatível com transformações 3D, mas sem aceleração de hardware, ele poderá parecer um pouco estranho.
Animação
A coisa que eu mais gosto sobre as transformações CSS3 3D é que ela se liga perfeitamente ao módulo de transição CSS. Animações e transições são fáceis de definir no CSS, e a aplicação delas a 3D não é exceção.
É fácil animar elementos com uma perspectiva 3D aplicada. Basta definir o estilo de "transição" como "transformação", anexar uma duração e uma função de animação. A partir de então, qualquer alteração no estilo da "transformação" será animada.
Refatoramos os exemplos anteriores para usar estilos de documento em vez de estilos inline. Isso não apenas esclarece o exemplo, como também permite que a amostra aproveite o pseudoseletor :hover. Usando o seletor :hover, as transições podem ser iniciadas simplesmente movendo o mouse sobre o elemento. Incrível!
Resumo
Esta foi apenas uma rápida olhada em alguns dos efeitos legais que podem ser aplicados a qualquer elemento DOM visível usando transformações CSS 3D. Ainda há muitas coisas que podem ser feitas que não foram abordadas neste tutorial.