TRANSFORM 2D (CSS3)

A propriedade transform manipula a forma com que o elemento aparecerá na tela. Você poderá manipular sua perspectiva, escala e ângulos. Uma transformação é especificada utilizando a propriedade transform. Os browsers que suportam essa propriedade, a suportam com o prefixo especificado.

Os valores possíveis até agora estão especificados abaixo:
scale
O valor scale modificará a dimensão do elemento. Ele aumentará proporcionalmente o tamanho do elemento levando em consideração o tamanho original do elemento.
skew
Skew modificará os ângulos dos elementos. Você pode modificar os ângulos individualmente dos eixos X e Y como no código abaixo:

-webkit-transform: skewY(30deg);
-webkit-transform: skewX(30deg);

translation

O translation moverá o elemento no eixo X e Y. O interessante é que você não precisa se preocupar com floats, positions, margins e etc. Se você aplica o translation, ele moverá o objeto e pronto.

rotate

O rotate rotaciona o elemento levando em consideração seu ângulo, especialmente quando o ângulo é personalizado com o transform-origin.

CSS Transform na prática

Veja o código abaixo e seu respectivo resultado:

img {
-webkit-transform: skew(30deg); /* para webkit */
-moz-transform: skew(30deg); /* para gecko */
-o-transform: skew(30deg); /* para opera */
transform: skew(30deg); /* para browsers sem prefixo */
}

O código acima determina que o ângulo da imagem seja de 30deg. Colocamos um exemplo para cada prefixo de browser. Ficando assim:

Várias transformações em um único elemento

Para utilizarmos vários valores ao mesmo tempo em um mesmo elemento, basta definir vários valores separando-os com espaços em uma mesma propriedade transform:

img {
-webkit-transform: scale(1.5) skew(30deg); /* para webkit */
-moz-transform: scale(1.5) skew(30deg); /* para gecko */
-o-transform: scale(1.5) skew(30deg); /* para opera */
transform: scale(1.5) skew(30deg); /* para browsers sem prefixo */
}

transform-origin

A propriedade transform-origin define qual o ponto do elemento a transformação terá origem. A sintaxe é idêntica ao background-position. Observe o código abaixo:

img {
-webkit-transform-origin: 10px 10px; /* para webkit */
-moz-transform-origin: 10px 10px; /* para webkit */
-o-transform-origin: 10px 10px; /* para webkit */
transform-origin: 10px 10px; /* para webkit */
}

Como padrão as transições sempre acontecem tendo como ponto de âncora o centro do objeto. Há algumas situações que pode ser que você queira modificar essa âncora, fazendo com que por exemplo, a rotação aconteça em algum dos cantos do elemento. O código de exemplo acima fará com que a transformação aconteça a partir dos 10px do topo no canto esquerdo. Veja a comparação entre o padrão e o resultado do código acima.

A propriedade transform fica mais interessante quando a utilizamos com a propriedade transition, onde podemos executar algumas animações básicas manipulando os valores de transformação.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s