CSS: Transform

O CSS nos permite criar diferenciados efeitos como sombras, bordas, backgrounds (fundos) etc. Para aqueles que ainda não conhece o poder do Transform, precisam conhecer. Pode adquirir 4 efeitos: Scale, Skew, Translate e Rotate.

- Irei explicar cada um!

Antes, Visualize Aqui

- Scale

Permite aumentar o tamanho do objeto. 

Código:

.scale {
-webkit-transform:scale(1);
-moz-transform:scale(1);
transform:scale(1);
-webkit-transition-duration: .30s;
}
.scale:hover {
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
transform:scale(1.3);
-webkit-transition-duration: .30s;
}

Para usar, cole o codigo acima antes de ]]></b:skin> e adicione ao código da imagem onde quer usar o efeito, o seguinte: class="scale". Deve ficar assim:

<img src="url" class="scale"/>

Visualize Aqui

- Rotate 
Meu preferido. Faz as imagens girarem.

Código:

.rotate {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition-duration: .30s;
}
.rotate:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition-duration: .30s;
}

Para usar, cole o código acima antes de ]]></b:skin> e adicione ao código da imagem onde quer usar o efeito, o seguinte: class="rotate". Deve ficar assim:

<img src="url" class="rotate"/>

Visualize Aqui

- Skew

Permite inclinar o objeto na direção desejada. A medida da inclinação é por ângulo, então se você colocar um valor 30, a imagem irá se inclinar 30 graus. Você também pode usar valores negativos.

Código:

.skew {
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
transform: skew(0deg);
-webkit-transition-duration: .30s;
}
.skew:hover {
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
-webkit-transition-duration: .30s;
}

Para usar, cole o codigo acima antes de ]]></b:skin> e adicione ao código da imagem onde quer usar o efeito, o seguinte: class="skew". Deve ficar assim:

<img src="url" class="skew"/>

Visualize Aqui

- Translate

Modifica a posição do objeto, desloca ele para a direita.

Código:

.translate {
transform: translate(0px);
-moz-transform: translate(0px);
-webkit-transform: translate(0px);
-webkit-transition-duration: .30s;
}
.translate:hover {
transform: translate(250px, 10px);
-moz-transform: translate(250px, 10px);
-webkit-transform: translate(250px, 10px);
-webkit-transition-duration: .30s;
}

Para usar, cole o codigo acima antes de ]]></b:skin> e adicione ao código da imagem onde quer usar o efeito, o seguinte: class="translate". Deve ficar assim:

<img src="url" class="translate"/>

Visualize Aqui