3D e CSS

HTML5 Rocks

Introdução

Por um longo tempo, o 3D estava restrito a aplicações desktop. Recentemente, com o advento de smartphones avançados, com acesso à aceleração GPU nativa, começamos a ver o 3D utilizado em praticamente qualquer lugar.

Geralmente, o 3D é utilizado primariamente como um elemento para jogos e algumas interfaces de usuário mais avançadas. Não era assim até a introdução das transformações de perspectiva (Perspective transforms) no WPF e Silverlight, nas quais um modelo adequado para aplicação de efeitos 3D aos elementos de interface de usuário tornou-se uma solução prática para utilização por desenvolvedores (já que, afinal de contas, o 3D não é exatamente fácil).

O "CSS 3D Transform Model" (Modelo de tranformação CSS 3D) foi introduzido como uma especificação rascunho (Draft Specification) em março de 2009 para possibilitar aos desenvolvedores web a criação de interfaces de usuário mais interessantes e atraentes, que tiram vantagem do 3D, proporcionando aos autores de aplicativos a utilização de transformações de perspectivas 3D a qualquer elemento visual do DOM.

O "CSS 3D Transformation Working Draft" é uma extensão lógica do "CSS 2D Transformation Model" (Modelo de transformação CSS 2D), introduzindo algumas propriedades extras, incluindo: perspectivas, rotações e transformações no espaço 3D.

Nunca tínhamos sido capazes de construir interfaces 3D tão facilmente. Essas tecnologias reduziram as barreiras de entrada. Já não era mais necessário ser um gênio da matemática para construir elementos 3D.

Deve ser notado que o módulo CSS 3D é destinado a ajudar desenvolvedores a criar aplicações visualmente ricas e interessantes e não se destina à construção de mundos completos e imersivos em 3D.

Suporte dos Browsers e Aceleração por Hardware

No momento (setembro de 2010), alguns browsers suportam o módulo CSS 3D, tais como Safari e Chrome. Um detalhe importante a ser lembrado é que apesar de um browser poder "suportar" o 3D, ele pode não ter a capacidade de renderizar em 3D.

As cenas em 3D baseadas no DOM podem ser computacionalmente dispendiosas e, portanto, as companhias desenvolvedoras de browsers, ao invés de afetar a velocidade de seus browsers com uma solução de renderização puramente em software, têm decidido tirar vantagem da GPU, a qual pode não estar disponível em todas as plataformas.

Detecção de Recursos

E a detecção de recursos? Eu estava esperando que você não fosse perguntar!

Desenvolvedores têm usado ferramentas tais como o modernizr para detectar o suporte a determinados recursos e habilidades do browser. Embora seja possível detectar a presença de suporte às transformações 3D, não é possível detectar a presença da aceleração por hardware e esta é o ingrediente chave.

Exemplo Básico

Não há nada melhor do que partir logo para a prática. Neste exemplo vamos aplicar um conjunto básico de rotação em um elemento arbitrário do DOM.

Começamos definindo a perspectiva no elemento root

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

A perspectiva é importante porque define o quão profunda será renderizada a cena em 3D, valores entre 1 e 1000 produzirão um efeito bem pronunciado e valores acima de 1000 nem tanto.

Nós então adicionamos um iframe e aplicamos uma rotação de 30 graus sobre os eixos Z e Y

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

BAM! É isso aí, o elemento é totalmente interativo e é um elemento do DOM inteiramente rotacionado em todos os seus aspectos (exceto pelo fato de parecer ainda mais legal agora).

Se o seu browser não suportar transformações em 3D, nada acontecerá. Você simplesmente verá um iframe simples, sem qualquer rotação aplicada. Se seu browser suporta transformações em 3D, mas sem aceleração por hardware, ele talvez pareça um pouco estranho.

Animando

O que eu adoro nas transformações CSS3 3D é que elas se adequam perfeitamente ao "CSS Transition module" (Módulo de transições CSS). Animações e transições são fáceis de definir em CSS e aplicá-las ao 3D não é exceção.

Animar elementos dotados de perspectiva 3D é fácil. Simplesmente defina o estilo "transition" para receber um "transform", anexe a duração e uma função de animação. A partir daí, qualquer mudança ao estilo "transform" receberá a animação.

Nós reelaboramos o exemplo anterior para usar estilos definidos no documento, ao invés de estilos inline. Isso não apenas torna o exemplo mais limpo, como também possibilita aproveitar o pseudo-seletor :hover. Usando o seletor :hover, transições podem ser inicializadas pelo simples movimento do mouse sobre o elemento. Fantástico!

Summary

Esta foi apenas uma pequena olhada sobre como podemos aplicar efeitos legais a qualquer elemento visível do DOM, usando transformações CSS 3D. Ainda há muitas coisas que podem ser feitas que não foram abordadas neste tutorial.

Comments

0