O W3C descreve CSS Transform assim:
CSS 2D Transforms allow elements rendered by CSS to be trans- formed in two-dimensional space.
Há dois tipos de CSS Transforms: no formato 2D e 3D. Veremos aqui apenas o formato 2D que é o que tem mais suporte entre os browsers. Testaremos com Firefox 4, Safari 5 e Opera 10.5. Perceba que o código estará com o prefixo de cada browser para que não haja problemas em browsers que não reconheçam as propriedades que iremos aplicar.
Temos abaixo um exemplo com 3 imagens. O código HTML é o seguinte:
<ul> <li><img src="https://tableless.github.com/exemplos/csstransforms/images/img1.png" alt="" /></li> <li><img src="https://tableless.github.com/exemplos/csstransforms/images/img2.png" alt="" /></li> <li><img src="https://tableless.github.com/exemplos/csstransforms/images/img3.png" alt="" /></li> </ul>
Apliquei o código CSS abaixo para que fique mais apresentável:
body { background:#EFEFEF; } ul { width:900px; margin:100px auto 0; } ul li { display:inline-block; list-style:none; } ul li img { vertical-align:middle; border:15px solid #FFF; }
A propriedade transform irá modificar a forma do elemento. Abaixo vamos conhecer alguns dos valores que iremos aplicar.
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 angulos dos elementos.
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 é personalisado com o transform-origin.
Como funciona
Scale
Adicionando o código abaixo, ao passarmos o mouse em cima das imagens, sua escala aumentará. Para entender o valor de referência da escala: 1 é o tamanho original do elemento. 2 é o dobro deste tamanho. Neste nosso exemplo diminui pela metade o tamanho da imagem ao passar o mouse aumentei em em 30% o
ul li img { -webkit-transform:scale(0.5); /* prefixo para browsers webkit */ -moz-transform:scale(0.5); /* prefixo para browsers gecko */ -o-transform:scale(0.5); /* prefixo para opera */ transform:scale(0.5); } ul li img:hover { -webkit-transform:scale(1.3); /* prefixo para browsers webkit */ -moz-transform:scale(1.3); /* prefixo para browsers gecko */ -o-transform:scale(1.3); /* prefixo para opera */ transform:scale(1.3); }
Skew
Para testar, vamos adicionar o valor skew. Aqui não estaremos fazendo bom uso do skew, mas há exemplos bem interessantes na internet como este.
ul li img { -webkit-transform:scale(0.5); /* prefixo para browsers webkit */ -moz-transform:scale(0.5); /* prefixo para browsers gecko */ -o-transform:scale(0.5); /* prefixo para opera */ transform:scale(0.5); } ul li img:hover { -webkit-transform:scale(1.3) skew(30deg); /* prefixo para browsers webkit */ -moz-transform:scale(1.3) skew(30deg); /* prefixo para browsers gecko */ -o-transform:scale(1.3) skew(30deg); /* prefixo para opera */ transform:scale(1.3) skew(30deg); }
Agora, no hover da imagem mudamos em 30 graus o ângulo. Veja um exemplo.
Translate
Substituindo o skew pelo translate, modificaremos a posição do elemento. Veja abaixo:
ul li img { -webkit-transform:scale(0.5); /* prefixo para browsers webkit */ -moz-transform:scale(0.5); /* prefixo para browsers gecko */ -o-transform:scale(0.5); /* prefixo para opera */ transform:scale(0.5); } ul li img:hover { -webkit-transform:scale(1.3) translate(80px, 80px); /* prefixo para browsers webkit */ -moz-transform:scale(1.3) translate(80px, 80px); /* prefixo para browsers gecko */ -o-transform:scale(1.3) translate(80px, 80px); /* prefixo para opera */ transform:scale(1.3) translate(80px, 80px); }
Rotate
E por fim, o efeito que eu acho mais legal é o rotate.
Com o código abaixo, rotacionamos o elemento em 180 graus.
ul li img { -webkit-transform:scale(0.5); -moz-transform:scale(0.5); -o-transform:scale(0.5); transform:scale(0.5); } ul li img:hover { -webkit-transform:scale(1.3) rotate(180deg); -moz-transform:scale(1.3) rotate(180deg); -o-transform:scale(1.3) rotate(180deg); transform:scale(0.5) rotate(180deg); }
Com animação
Aplicando animação via CSS, o exemplo fica mais interessante.