Trabalho

CSS3 transformações 2D e 3D

Outubro de 2013
Sumário

1. INTRODUÇÃO 4
2. A propriedade transform. 5
I. Matriz 3D 6
II. Conversão 3D 7
III. Conversão na direção Z 8
IV. Escala 3D 9
V. Escala vetorial Z 10
VI. Giro 3D 11
VII. Giro na direção X 12
VIII. Giro na direção Y 13
IX. Giro na direção Z 14
X. translate() 2D 15
XI. rotate() 2D 16
XII. scale() 2D 17
XIII. skew() 2D 18
3. Referencia 19
4. CONCLUSÃO 20

1. INTRODUÇÃO

Com a utilização de CSS3, nunca foi tão fácil desenvolver websites e aplicações Web com um design atrativo utilizando HTML. Existe um conjunto de novas tecnologias e extensões nesta nova versão de CSS, como transições, transformações (2D e 3D) e suporte de tipografia para a Web que permitem que esse objetivo seja uma realidade.

2. A propriedade transform.
Você aplica transformações 2D e 3D a um elemento usando a propriedade transform, que contém uma lista de funções de transformação. A sintaxe da propriedade é a seguinte:
Descrição: Indica as funções de transformação (listadas na seção seguinte) a serem aplicadas ao elemento especificado. A propriedade transform pode ser definida como uma lista de funções de transformação (delimitada por espaços) ou como a palavra-chave none, indicando que nenhuma função de transformação foi aplicada.
Com a propriedade transform, isso ficou bem mais simples e, para completar a boa notícia, todos os principais browsers da atualidade suportam este recurso (cada um utilizando seus prefixos). Os prefixos são os seguintes:
Internet Explorer 9: -ms-
Firefox: -moz-
Safari e Chrome: -webkit-
Opera: -o-

Funções de transformação com suporte:
Veja a seguir uma lista de funções de transformação com suporte no Internet Explorer 10 e nos aplicativos da Windows Store que usam JavaScript para Windows 8. Cada uma é seguida de uma breve amostra de marcação e de uma imagem que demonstra o efeito da amostra.

I. Matriz 3D matrix3d(<number>, <number>, <number>, <number>, <number>,