Tutorial: Imagem com efeito giratório

Bom dia a todos, bom, pra começar estou naquele tédiooo novamente. Então resolvi procurar vários tutos para trazer para vocês. Confesso que, não estou colocando nenhum desses Tutoriais no blog, o motivo, não sei... Mas prefiro trazer pra vocês...

Então sobre esse post, Achei esse tuto no Karine in Júpiter, um efeito super legal e bem fácil... da um trabalhinho, confesso, mas se vocês gostam muito de ficar arrumando seu blog.... está ai mais um tuto. Espero que gostem!

Vá em Design > Editar HTML >  CTRL + F > e procure por: ]]></b:skin>

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

EFEITO 1

.rotate{
width:auto;
border-radius:5px;
border: 4px double #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

.rotate:hover{
width:auto;
-webkit-transform: rotateY(-360deg);
border: 4px solid #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

EFEITO 2

.rotate{
width:auto;
border: 4px solid #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}
.rotate:hover{
width:auto;
border: dashed 4px #ff73da;
-webkit-transform: rotatex(-360deg);
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

  Depois de escolher o estilo Salve!!
 Modifique como quiser o que esta destacado em rosa

 Obs: Agora para que o código funcione coloque onde você quiser que apareça esse efeito o seguinte código:
Se quiser por link na imagem:

<a href="URL"> <img src="LINK DA IMAGEM" class="rotate"></a>

Se não quiser link na imagem:

<img src="LINK DA IMAGEM" class="rotate">

E prontinho, espero que tenham gostado do Tuto e usem bastante, beijocas ><