3D e CSS

Paul Kinlan

Introdução

Por muito tempo, o 3D foi reservado para aplicativos para computador. Recentemente, com a introdução de smartphones avançados que têm acesso à aceleração nativa da GPU, começamos a ver o 3D sendo usado quase em todos os lugares.

Normalmente, o 3D é usado principalmente como um dispositivo para jogos ou algumas interfaces de usuário avançadas. Foi somente com a introdução das transformações da Perspective 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, usar 3D não é exatamente fácil).

O modelo de transformação 3D do CSS foi introduzido como um rascunho de especificação em março de 2009 para permitir que desenvolvedores da Web criassem interfaces de usuário interessantes e atraentes que aproveitam o 3D, permitindo que os autores de aplicativos apliquem transformações de perspectiva 3D a qualquer elemento visual do DOM.

O rascunho de trabalho da transformação 3D do CSS é uma extensão lógica do modelo de transformação 2D do CSS, apresentando algumas propriedades extras, incluindo perspectivas, rotações e transformações em um espaço 3D.

Nunca foi tão fácil criar interfaces 3D. Essas tecnologias reduziram a barreira de entrada. Você não precisa mais ser um gênio da matemática para criar elementos 3D.

O módulo CSS 3D foi projetado para ajudar os desenvolvedores a criar aplicativos ricos e visualmente interessantes, não para permitir que você crie mundos 3D imersivos.

Suporte a navegadores e aceleração de hardware

-webkit-perspective

-webkit-transform-3d

É importante lembrar que, embora um navegador possa "oferecer suporte" a conteúdo 3D, ele pode não conseguir renderizar esse conteúdo devido a limitações de hardware e driver. As cenas 3D baseadas no DOM podem ser muito caras em termos computacionais. Por isso, em vez de desacelerar os navegadores com uma solução de renderização de software pura, os fornecedores de navegadores vão aproveitar 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 perguntasse isso. Os desenvolvedores têm usado ferramentas como o Modernizr para detectar o suporte a recursos e capacidades específicas do navegador. Embora seja possível detectar a presença de suporte a transformações 3D, não é possível detectar a presença de aceleração de hardware, que é o ingrediente principal.

Exemplo básico

Não há nada melhor do que ir direto ao ponto. Neste exemplo, vamos aplicar 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 em 3D é renderizada, os valores de 1 a 1.000 produzirão um efeito muito acentuado, e os valores acima de 1.000 a menos. 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! Pronto. O elemento é totalmente interativo e, em todos os aspectos, é um elemento DOM completo (exceto que agora parece ainda mais legal). Se o navegador não oferecer suporte a transformações 3D, nada vai acontecer. Você vai ver apenas um iframe simples sem rotação aplicada. Se o navegador oferecer suporte a transformações 3D, mas sem aceleração de hardware, isso poderá parecer um pouco estranho.

Animação

O que eu mais gosto nas transformações 3D do CSS3 é que elas se conectam perfeitamente com o módulo de transição do CSS. É fácil definir animações e transições no CSS, e aplicá-las a gráficos 3D não é uma exceção.

É fácil animar elementos que têm uma perspectiva 3D aplicada. Basta definir o estilo "transition" como "transform", anexar uma duração e uma função de animação. A partir de então, qualquer alteração no estilo "transformação" será animada.

Reformulemos os exemplos anteriores para usar estilos de documento em vez de estilos inline. Isso não apenas esclarece o exemplo, mas também permite que a amostra aproveite o pseudoseletor :hover. Com o seletor :hover, as transições podem ser iniciadas simplesmente movendo o mouse sobre o elemento. Incrível!

Resumo

Essa foi apenas uma breve visão geral de alguns dos efeitos legais que podem ser aplicados a qualquer elemento DOM visível usando transformações 3D do CSS. Ainda há muitas coisas que podem ser feitas que não foram abordadas neste tutorial.