Efeito Seesaw

Hello, como vão ? Tudo certo com vocês ? Hoje eu vim trazer um efeito super fofo (Esquisito), que gostei bastante do resultado, eu tinha feito outro, mais havia pessoas que já tinham visto efeitos parecidos, então eu fiz outro já que aquele "era mais conhecido". Para quem não sabe seesaw é gangorra em inglês, e coloquei esse nome por causa do movimento que o efeito faz, quando você passa o mouse, ele sobre um pouco, ai quando você solta o mouse da imagem, ele vai voltar ao normal, fazendo o movimento da gangorra, interessaram ? Clique em "Mais informações"

Antes de ]]></b:skin>, cole esse código:

.seesaw {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(1deg) scale(1) skew(1deg) translate(1px);
-webkit-transform: rotate(1deg) scale(1) skew(1deg) translate(1px);
-moz-transform: rotate(1deg) scale(1) skew(1deg) translate(1px);
-o-transform: rotate(1deg) scale(1) skew(1deg) translate(1px);
-ms-transform: rotate(1deg) scale(1) skew(1deg) translate(1px);
}
.seesaw:hover{
transform: rotate(20deg) scale(0.95) skew(1deg) translate(0px);
-webkit-transform: rotate(20deg) scale(0.95) skew(1deg) translate(0px);
-moz-transform: rotate(20deg) scale(0.95) skew(1deg) translate(0px);
-o-transform: rotate(20deg) scale(0.95) skew(1deg) translate(0px);
-ms-transform: rotate(20deg) scale(0.95) skew(1deg) translate(0px);
-webkit-filter: opacity(90%);
}

Agora, coloque dentre de uma gadget de HTML/JavaScript esse código e substitua as coisas que estam grifadas, pelas informações que se pede.

<a href="LINK DO BLOG" title="TÍTULO DO BLOG"><img src="LINK DA IMAGEM" class="seesaw" /></a>

Espero que tenham gostado, pode repassar, mais com os créditos ao Gave Crazy por favor, e se for útil ou tenha algum problema, avise nos comentários. Rabiscado por, Eloísa.