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 apropriedade 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 pront.
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:
Oops! This image does not follow our content guidelines. To continue publishing, please remove it or upload a different image.
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. Asintaxe é 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.
Oops! This image does not follow our content guidelines. To continue publishing, please remove it or upload a different image.
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.
