Efeito giratório ( 2 opções )

Hi everybody!

Amanhã é feriado, finalmente, porque eu estou toda queimada e na escola ficam dando tapas no meu rosto ( meu rosto é aonde eu estou mais queimada '-' ). Finalmente as aulas estão acabando, faltam alguns dias. Eu quero mudar logo de sala, porque eu estou nessa sala praticamente a 2 anos seguidos, é que o diretor decidiu colocar os mesmos alunos na mesma sala, só que é lógico que vieram alunos novos de outra escola. Ah, gente, falta só um seguidor pra 100, sério, obrigada mesmo!

Hoje eu decidi postar um efeito, como tem poucos no Blog. São 2 efeitos, você escolhe qual você quer usar. O primeiro é praticamente giratório, o segundo já 'desliza', eu não vou conseguir explicar como eles são, então veja a Preview. Se você pegar, por favor dê créditos ou pelo menos avise que pegou, ok? Vamos ver o tuto *u*

Caso quiser o efeito 1:

Vá em seu HTML, procure por ]]></b:skin> e acima dessa tag, cole:

/* EFEITO GIRATÓRIO POR HELOÍSA */
.girinho {
transition:All 0s ease;
-webkit-transition:All 0.1s ease;
-moz-transition:All 0s ease;
-o-transition:All 0s ease;
transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-webkit-transition-duration: .60s;
}
.girinho:hover{
transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
} 

Em seguida, cole em um Gadget HTML/JavaScript

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

Caso quiser o efeito 2:

Vá em seu HTML, procure por ]]></b:skin> e acima dessa tag, cole:

/* EFEITO GIRATÓRIO POR HELOÍSA */
.girinho2 {
transition:All 0s ease;
-webkit-transition:All 0.1s ease;
-moz-transition:All 0s ease;
-o-transition:All 0s ease;
transform: rotate(0deg) scale(0) skew(1deg) translate(15px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-webkit-transition-duration: .60s;
}
.girinho2:hover{
transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
-webkit-transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
-moz-transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
-o-transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
-ms-transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
}

E em um Gadget HTML/JavaScript, cole: 

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

Obviamente, substitua os trechos 'Título do Blog' 'Link da Imagem' e 'Link do Blog' pelo que pede