1 / DO QUE ESTAMOS FALANDO?

3D para conseguir tudo… -Na nossa profissão de UX-Scientist (Front-End developer star of UX 🙂 ), estamos acostumados a trabalhar em 2D. Estamos familiarizados com essas propriedades CSS3 que permitem criar cantos arredondados, gradientes e outras sombras projetadas.
No entanto, além desses efeitos já interessantes, existem transições, transformações e animações que permitem fazer coisas apenas em CSS que ainda eram impossíveis há alguns anos.
Estas propriedades são sobretudo também propriedades 2D mas a sua utilização dá acesso a uma terceira dimensão para as nossas criações.
Você pode fazer muitas coisas em 3D. Para este artigo, optei por focar na geometria pura, porque me excita…
Aqui está uma apresentação bastante geral do assunto. Em breve, postarei um tutorial mais completo para aprender a criar uma forma 3D.

Essas propriedades, portanto, existem desde 2009, e foram implementadas pela primeira vez pela equipe Safari/Webkit.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

2 POSSIBILIDADES

– Transições: com as transições poderemos brincar com cores, gradientes, sombras, comprimentos e mudanças de estado…
– Transformações: com as transformações realizaremos transformações no espaço, rotações por exemplo.
– Animações: e com as animações vamos animar (obrigado senhor óbvio) os dois efeitos anteriores
Esses efeitos podem ser combinados à vontade para criar outros mais elaborados.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

3 / DESEMPENHO

Animações feitas em CSS3 são extremamente fluidas e fáceis de implementar. Tudo roda no lado do cliente, o que significa que o navegador faz os cálculos (sem a ajuda de um servidor, o que era quase impossível 1 ano atrás).
Também não há necessidade de javascript. É muito bom poder obter tais efeitos sem escrever nenhum script.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

4 / COMO FUNCIONA

As transformações 3D são baseadas nas mesmas propriedades das transformações 2D. 'transformar' neste caso.
Outras propriedades são necessárias para obter o efeito 3D, como: 'perspectiva', 'translate', 'rotate'.
– A perspectiva corresponde ao ponto de fuga. Representa a distância entre a câmera e a cena (o internauta e a tela). Sem perspectiva, a impressão 3D não existe.
Os três ângulos também são representados (X,Y,Z):
– translateZ move o elemento para longe do centro da forma 3D,
– translateX desloca o elemento no eixo horizontal,
– translateY desloca o elemento no eixo vertical.
– rotateX gira o elemento em seu eixo horizontal central,
– rotateY gira o elemento em seu eixo central vertical.

[tipo de separador=”” tamanho=”” ícone=”estrela”]

6 / COMPATIBILIDADE

Você poderá visualizar esses efeitos com Safari, Chrome, Firefox e Internet Explorer 10.
Suporte ao navegador no w3c School
No entanto, às vezes você precisará usar prefixos de fornecedor:
-o- para ópera
-moz- para Gecko (Mozilla)
-webkit- para Webkit (Chrome, Safari, Android…)
-ms- para Microsoft (Internet Explorer)
Os prefixos do fornecedor são necessários até que a especificação W3C do módulo de transformações 3D seja finalizada.
Para permitir o desenvolvimento progressivo e implementação de módulos CSS, os fornecedores de navegadores têm a possibilidade de introduzir suporte para propriedades específicas. Esta forma de funcionamento é recomendada pelo W3C desde CSS 2.1 e válida para as seguintes versões. Para evitar o preenchimento de nossos arquivos com regras prefixadas, poderemos usar SASS ou LESS, o que nos permitirá tornar isso genérico.

[tipo de separador=”” tamanho=”” ícone=”estrela”]

8 / EXEMPLOS

Por fim, aqui estão alguns links para dar exemplos do que é possível alcançar em geometria 3D, com o trabalho de Julien Knebel, ou mesmo Ana Tudor, meu ídolo nesta área.
Julien Knebel em Codepen
Ana Tudor em Codepen
Novamente Ana Tudor no Codepen
E por fim, um aplicativo que descobri muito recentemente, e que talvez seja assunto de outro artigo em breve tridiv.com
É um aplicativo que permite criar formas 3D a partir de CSS3. Ela parece muito bem feita. Para ser testado, portanto (não compatível com Firefox).
Emmanuelle GUYOT / Cientista UX

---