Como os navegadores se tornam mais poderosos, novos recursos interessantes para HTML5 e CSS3 programação estão surgindo. Um dos desenvolvimentos mais interessantes é a formação de transformações 3D. Uma transformação 3D é semelhante às transformações tradicionais, mas permite a um terceiro eixo virtual.

Comuns, animações 2D utilizar o sistema de coordenadas 2D, com um eixo X lado a lado indo e um eixo Y atravessando de cima para baixo. Mesmo em transformações 2D, existe um reconhecimento tácita de um eixo z. O eixo Z atravessa o centro do objeto e aponta diretamente para os olhos do espectador e de volta para o infinito por trás da tela. 2D são rotações em torno deste eixo Z imaginário.

Você pode determinar quais os elementos que se sobrepõem outros elementos através da propriedade CSS, por isso, embora todos os elementos da tela são a mesma distância real entre o usuário, eles parecem ter algum tipo de profundidade.

transformações 3D têm as mesmas operações gerais como 2D (traduzir, girar e escala), mas você pode aplicar a transformação ao longo de um dos três eixos: X, Y ou Z.

Você vê cinco caixas com estilos quase idênticos. Cada caixa tem uma transformação 3D diferente aplicados:

• Box 1 tem comportamento padrão: Box 1 usa o layout comum, sem transformação 3D aplicada a todos.

• Caixa 2 é rodado 45 graus em torno x: Box 2 parece ser truncado, mas na verdade é girado em torno do eixo horizontal (X). Note-se que tanto a própria caixa eo texto dentro da caixa são encurtados.

• Box 3 é quase invisível: Box 3 também foi rodado em torno do eixo X, mas este é rodado cerca de 90 graus, por isso é quase invisível.

• Box 4 é de cabeça para baixo: Quadro 4 é rodado 180 graus em torno do eixo X, virá-lo completamente. Note-se que em rotação em torno do eixo Y também iria inverter a caixa, mas o texto permaneceria na parte superior, e seria invertida ao longo do eixo vertical.

• Caixa 5 está a fazer todos os tipos de coisas loucas: Caixa 5 tem duas transformações aplicadas ao mesmo tempo. Ele é rodado 45 graus em torno de X e Y juntamente -45 graus.

Dê uma olhada no código para ver exatamente o que está acontecendo aqui.

3D Transform Demonstração
1 caixa
Caixa 2
Caixa 3
casa 4
Caixa 5

A primeira regra nova é perspectiva. Mudar a perspectiva do elemento pai que conterá seus elementos transformados. Isso lhe dá a capacidade de determinar como os elementos aparecem a ser exibido. A perspectiva indica quão perto a câmera parece ser aos elementos.

Caixas de 2 a 4 todos usam a mesma regra de transformação:. Este mecanismo é muito parecido com o 2D rotate ()função, mas que roda ao longo do eixo X. Há também rotatey ()e rotatez () funções, mas rotatez ()é pouco usado porque é exatamente como o 2D rotate ()técnica.

Se você deseja aplicar mais de uma rotação, você pode usar o gire 3d ()função. Esta função tem quatro parâmetros. Os três primeiros são modificadores para os três eixos, eo quarto é um ângulo.

CSS3 também suporta o translatex, translatey (), e translatez () funções. Estes mecanismos permitem que você especifique uma tradução ao longo de um eixo específico O translate3d () função permite transladar ao longo vários eixos ao mesmo tempo.

CSS3 inclui scaleX, scaley, e scaleZ funções, mas novamente estes nem sempre são usadas porque actuam semelhante à função de escalonamento 2D. Há também um 3d scale () função para uso com múltiplas escalas.

O suporte para as transformações 3D está crescendo, mas não completa. Neste momento, o -webkit e há-de prefixo versões apoiará a maioria dos navegadores. A família IE dos navegadores tem suporte limitado para transformações 3D.