Video: O que é e como funciona o jQuery

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 um terceiro eixo virtual.

Comuns, animações 2D utilizar o sistema de coordenadas 2D, com um eixo X lado-a-lado e indo um eixo Y que atravessa 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. rotações 2D são 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 de tela são a mesma distância real do usuário, eles parecem ter algum tipo de profundidade.

transformações 3D têm as mesmas operações gerais como 2D (traduzir, rodar, e escala), mas é possível 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 aplicado a todos.

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

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

• 
  
  
  

  Box 4 é de cabeça para baixo: Box 4 é girado 180 graus em torno do eixo X, lançando-o 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á fazendo todos os tipos de coisas loucas: Box 5 tem duas transformações aplicadas ao mesmo tempo. Ele é rodado 45 graus em torno x e -45 graus ao longo y.

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

3D Transform Demonstração
caixa 1
caixa 2
caixa 3
Video: Cool Css Border Animation - CSS3 Hover Effects - Pure CSS Tutorials - Plz SUBSCRIBE Us For more
caixa 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 parecem ser exibido. A perspectiva indica o quão perto a câmera parece ser aos elementos.

Video: Pulse Effect With CSS3 Animation - Pure Css Tutorials

Caixas de 2 a 4 todos usam a mesma regra de transformação:. Este mecanismo é muito parecido com o 2D rodar ()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 rodar ()técnica.

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

CSS3 também suporta o translatex, translatey (), e translatez () funções. Estes mecanismos permitem especificar uma tradução ao longo de um determinado eixo A translate3d () função permite traduzir ao longo vários eixos ao mesmo tempo.

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

Suporte para as transformações 3D está crescendo, mas não completa. No 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.