CSS 3D… Você sabia?

Seja você um webdesigner, webdeveloper ou mobile developer, já deve ter ouvido falar nas infinitas possibilidades que o CSS3 trás para a mesa. Um dos recursos mais interessantes é a possibilidade de manipular objetos do DOM através da propriedade ‘transform’, no intuito de adicionar um maior interesse visual no conteúdo da sua página, como mover um elemento na tela com o clique do mouse – alterando sua forma e tamanho – construir menus animados e tantas outras possibilidades onde apenas o céu é o limite.


Cube ImgO mais interessante disso tudo é a possibilidade de combinar esses efeitos com animações. O que antes só era possível fazer com Javascript, agora pode ser feito exclusivamente com CSS. Mas, apesar de haver diversos exemplos espalhados na web sobre como aplicar uma série de recursos aos seus elementos utilizando a propriedade ‘transform’, a maioria é centrada em 2D, fazendo com que os recursos em 3D da linguagem fiquem menos conhecidos. A diferença é simples: Enquanto os princípios das transformações em 2D se aplicam ao eixo X e Y de um objeto, em 3D adicionamos o eixo ‘Z’, que é responsável por definir a profundidade de um objeto, calculado pela distância entre o mesmo e o espectador.

Para aprender mais sobre a propriedade ‘transform’ do CSS, você pode visitar este link do w3schools.

Esse artigo tem o propósito de apresentar esses conceitos da forma mais simples possível: Criando um cubo em 3D.

Criando o cubo

Vamos criar um cubo com 4 lados: A parte de frente, costas, lado direito e esquerdo. Dessa forma podemos ter uma visão mais interessante do centro do cubo quando o mesmo estiver em rotação. Para isso, criaremos uma div para cada lado e iremos posicioná-las de acordo, fazendo com que compartilhem uma classe CSS em comum – da mesma forma que também tenham sua própria classe e comportamento:

Agora vamos definir a altura e largura das partes do nosso cubo mágico e posicioná-los de forma absoluta no intuito de que fiquem empilhados uns sobre os outros. Isso irá facilitar o processo de construção. Reparem que estou herdando a altura e largura da div principal em minha classe “face”.

Agora que posicionamos as divs, usaremos cores de background diferentes para poder identificar os lados do nosso cubo. Em seguida, usaremos algumas combinações da propriedade ‘transform’ do CSS3 para posicionar cada lado de forma correta:

Atualize o seu browser e você vai ver uma imagem parecida com essa:

Cube Img

É… concordo que este não era o resultado que você estava esperando depois de tanto trabalho, não é mesmo? Mesmo sabendo que conseguimos alterar a posição dos lados do nosso cubo, o mesmo ainda aparece de forma totalmente plana na tela. O motivo disso estar acontecendo é muito simples: A ausência de perspectiva. A perspectiva é uma propriedade nova no CSS3 que possibilita que objetos se comportem de forma tridimensional no browser.

Adicionando perspectiva ao cubo

Imagine que você tem um elemento na tela que está sendo posicionado à uma distância ‘x’ do usuário: Quanto mais distante esse objeto fica, mais ele se aproxima da linha de perspectiva, provocando a ilusão de que o objeto faz parte de um universo 3D. Você pode simular esse efeito aplicando essa propriedade no eixo ‘z’ do objeto.

Quanto maior o valor numérico que você estipula, maior será a distância entre o objeto e o usuário.

No entanto, a simples aplicação dessa propriedade no seu código não fará com que o objeto seja renderizado de forma tridimensional na tela. O motivo é que, em CSS, para exibir objetos dessa forma, precisamos fazer uso da propriedade transform-style. No nosso caso, estamos assumindo que a nossa cena está em 3D, portanto:

Antes de adicionar estas propriedades em nossa classe ‘cube’, precisamos fazer uma simples correção em nosso HTML…

Se formos aplicar essas propriedades diretamente em nosso cubo, algo estranho ocorrerá com nosso objeto: Ele se comportará de forma indesejada quando estiver sendo visto por outros ângulos que não seja o frontal. Isso ocorre porque, adicionando a perspectiva diretamente ao cubo, ele irá aplicar um ponto de fuga apenas ao cubo, e não à cena.

“Ponto de fuga é um ente do plano de visão, que representa a interseção aparente de duas, ou mais, retas paralelas, segundo um observador fixo. Todo ponto de fuga situa-se na linha do horizonte.”Wikipedia

Em outras palavras, precisamos que esse ponto seja aplicado à cena e não ao cubo em si. Vamos alterar o HTML criando uma div com nome de ‘cube-area’ responsável por envolver o nosso cubo em uma cena tridimensional:

Voltando ao CSS, vamos aplicar as propriedades que estudamos acima: Adicionamos a perspectiva à area do cubo e, por sua vez, transformamos o cubo em 3D:

Atualize o seu browser e você verá algo parecido com a imagem abaixo:

Cube Img

” – Hummm, estranho… Parece que algo deu errado. Não estou vendo o meu cubo em 3D…” Na verdade, ele está em 3D! Você não consegue ver simplesmente porque adicionamos cores sólidas às partes que compõem o nosso cubo, o que faz com que ele fique invisível pra você. Para corrigir isso, voltamos à classe ‘face’ – que é a classe comum dos lados do cubo – e faremos com que cada lado fique semi-transparente com a propriedade ‘opacity’:

Agora sim. Salve o arquivo e atualize o seu browser. A imagem que você vê agora é essa:

Cube Img

Agora que conseguimos montar um cubo em 3D, podemos brincar com as propriedades ‘transform’ do CSS para ver o cubo por diferentes ângulos:

O resultado:

Cube Img

Vamos rever o que aprendemos até aqui:

  • Criamos formas geométricas apenas utilizando ‘translate’ e ‘rotate’ da propriedade transform do CSS;
  • Transformamos um objeto em 3D apenas com a propriedade transform-style do CSS;
  • Ajustamos este objeto em perspectiva dentro de uma cena com a propriedade perspective;
  • Fizemos tudo isso sem utilizar uma gota de javascript!

Dando um passo além com CSS keyframes

Não seria interessante fazer o cubo se mover de forma animada por diferentes ângulos? Podemos fazer isso também de forma muito simples utilizando o recurso de keyframes do CSS:

O código acima informa que vamos partir de uma propriedade com um valor inicial até um valor final qualquer. No nosso caso, se quisermos girar o cubo em 360 graus pelo eixo X, escreveríamos nosso código da seguinte forma:

A forma mais fácil de ver a mágica acontecer é acionando a animação através de uma classe CSS, por exemplo:

Ou, utilizar a versão ‘shorthand’ do código acima, dessa forma:

Para verificar se está funcionando, adicione a classe ‘xrotation’ à div ‘cube’ do seu HTML e você vai ver que seu cubo agora está animado. How cool is that, huh?

Podemos fazer melhor e controlar essa animação através de Javascript. No código abaixo, a cada clique no botão, eu disparo um evento que se encarrega de adicionar a classe da animação ao meu cubo e, depois de 3 segundos, essa classe é removida (estou utilizando jQuery neste exemplo):

Agora só falta adicionar o botão no meu código HTML:

Atualize o seu browser e veja o resultado.

E é isso! Conseguimos fazer um cubo em 3D que gira em 360 graus apenas com o clique de um botão. Nenhum recurso adicional do HTML5, como canvas object por exemplo, foram utilizados. Toda animação é feita com CSS3 e os novos recursos poderosos da linguagem.


Sobre o Autor

Carlos Cabral

Twitter

Quando não pratica o estranho hábito de sair à noite vestido de morcego para prender bandidos, Carlos gasta boa parte de seu tempo estudando tecnologias que adora. Admira silenciosamente o sucesso do HTML5 e promete não abandonar o Sublime Text por um bom tempo.

Comments 4

  1. Boa noite ò Carlos, gostei bastante do seu poste no site, pois abordas temas de grande importancia no mundo de computação sobretudo para a programação gráfica. Força.

  2. Bom dia, segui todos os passo, na verdade dei Ctrl + C nos códigos mas não da certo. chego nessa parte

    .face{
    position: absolute;
    height: inherit;
    width: inherit;
    /* Adicionamos opacidade de 50% aos objetos… */
    opacity: .5;
    }

    mas continua um quadrado

Leave a Reply

Your email address will not be published. Required fields are marked *