Efeito rotate surprise

Bom dia, leitores.

Sim, eu resolvi aparecer mais cedo por aqui, pois não vai ser possível que eu entre no período da tarde, embora eu esteja no período de recesso escolar ainda tenho que ao meu inglês. Enfim, queria aproveitar o momento e agradecer também pelos 81 seguidores, estamos cada vez mais perto da meta dos 100. Mas vamos ao assunto do post, como vocês sabem eu estou muito no tédio e sem nada de bom para falar.

Como vocês sabem eu ainda sou iniciante em html e css, mas eu tentei e consegui fazer meu primeiro efeito, ele é um simples efeito que faz a imagem girar em 360º com um charme que fica por conta das bordas, você  podem conferir o efeito aqui. Tentei dar uma cara nova ao que muita gente já fazia sempre do mesmo jeito e tenho que admitir que isso já estava me deixando aborrecida, então eu pensei por que não reinventar?
--------------------------------------------------------------------

1. Cole este código acima de ]]></b:skin> :

.rotate {
width:30px;
height:30px;
background:red;
transition:width 0.5s, height 0.5s;
-webkit-transition:width 0.5s, height 0.5s, -webkit-transform 0.5s;
border-radius: 4px 8px;
webkit-border-radius: 4px 8px;
moz-border-radius: 4px 8px;
border: 1px solid #000;
}
.rotate:hover {
transform:rotate(360eg);
-webkit-transform:rotate(360deg);
border-radius: 0px;
webkit-border-radius: 0px;
moz-border-radius: 0px;
outline-style:dashed;
outline-width:2px;
outline-color: #fff;
outline-offset: -4px;
}

2. Adicione um gadget HTML/Javascript e cole o código:

<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>

<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>

<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>

<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>

<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>

Basta substituir as partes indicadas e pronto.