Tutorial: Efeito Gira

Achariam legal fazer uma pagina para o blog?

Yoo

Vou começar a postar os efeitos que criei. Esse efeito Gira eu criei a pouco tempo pois fui mudar um código em um outro efeito que tinha e saiu isso,então acabei deixando assim. Você pode ver AQUI no blog de Tutoriais. Se tiver algum efeito semelhante é coincidência, pois não copiei de ninguém.  O primeiro efeito que fiz aprendi em um blog que não me lembro o nome, pois foi a muito tempo. Não liguem para o  Layout de tutoriais pois estava com preguiça de fazer um descente há há.

 Vá em editar HTML e procure por ]]></b:skin> e acima cole: 

gira {
float: left;
background-color: #CECECE;
height: 43px;
margin-right: 10px;
border: 4px white solid;
}
.gira:hover{
float: left;
background-color: #CECECE;
height: 43px;
margin-right: 10px;
border: 4px white solid;
-webkit-transform: rotateZ(-1080deg);
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transform: rotateZ(-600deg);
-moz-transition: -moz-transform 2s ease-in-out;
-o-transform: rotateZ(-6deg);
-o-transition: -o-transform 2s ease-in-out;
-ms-transform: rotateZ(-6deg);
-ms-transition: -ms-transform 2s ease-in-out;
transform: rotate(-60deg);
transition: transform 2s ease-in-out;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
-webkit-backface-visibility: hidden;
}

Troque pela altura e largura que você quer onde está destacado de Roxo.
Visualize e se estiver tudo certo salve.

Em  gadget de HTML/JavaScript, cole:

<a href="LINK" title="Nome do blog"><img src="LINK DA IMAGEM" class="gira"/></a>

Agora é só substituir onde está destacado e pronto.