Efeito Translate e Efeito Rotate

Olá pessoas! Como vão? Trouxe dois efeitos de imagem para vocês, um é o Translate e o outro é o Rotate. Achei lá no Cherry Bomb. Veja um preview aqui.

Espero que gostem! 

Translate:

Cole o seguinte código acima de ]]></b:skin>:

.translate {

transform: translate(0px);

-moz-transform: translate(0px);

-webkit-transform: translate(0px);

}

.translate:hover {

transform: translate(160px, 10px);

-moz-transform: translate(160px, 10px);

-webkit-transform: translate(160px, 10px);

} 

Rotate:

Cole o seguinte código acima de ]]></b:skin>:

.rotate {

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

transform: rotate(0deg);

}

.rotate:hover {

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

transform: rotate(180deg);

}

Para usa-los basta colar um dos seguintes códigos em um gadget HTML/Javascript:

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

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

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar