18 de jan de 2013

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"/>

2 comentários:

  1. Gostei dos efeitos, já estou pensando em usar eles em alguma coisa pro próximo layout rsrs'

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!