Blogger: Efeito de rotação 360 em imagens do seu blog com CSS3

   Olá caros leitores do Amotrix, hoje estou aqui com mais um tutorial destinado ao Blogger, que estaremos contando com a ajuda do CSS3. Enfim, esse tutorial você aprenderá a como usar o atributo o efeito 360 nas imagens do seu blog.

Exemplo:

Instalando o efeito

Acesse o Blogger e faça seu login;
Dirija-se até a página Modelo (Painel > Mais Opções > Modelo);
Clique em Editar HTML e procure pela tag ]]></b:skin>;
E acima adicione o seguinte código:

.imagem360 {
-webkit-transition:All 1.5934s ease;
-moz-transition:All 1.5934s ease;
-o-transition:All 1.5934s ease;
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
}
.imagem360:hover{
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
}

Salve, e pronto. 

Usando o efeito

    Para usar o efeito, é necessário somente que você ao adicionar a imagem use o seguinte código:
  
<div class="imagem360">
Código da imagem
</div>

Exemplo do código:

<div class="imagem360>
<a href="http://www.amotrix.webs.com/Imagens/Logo.PNG"><img src="http://www.amotrix.webs.com/Imagens/Logo.PNG" width="200" /></a></div>