Efeito animação em 3D em imagem

Hiiii! Como vão todos? Bom espero que bem! Sempre desejo que bem. Hoje venho trazer um efeito para imagens, uma animação em 3D, utilizando somente CSS, claro que hoje em dia é possível fazer muitas coisas só com o CSS, mas o efeito 3D não se trata somente de um hover, mas de um efeito em peso que faz parecer que usamos nosso querido JQuery, mas desda vez não. É possível ver o efeito no link mais abaixo, os créditos vão para o blog Mundo Blogger.

Brevia do efeito

1. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, procure por  ]]></b:skin>, e acima dele cole:

Códigos

/*Efeito 3D Imagens
-------------------------------------*/
#r3d_container {
position: relative;
width: 300px; /* defina largura padrão da imagem */
height: 250px; /* defina altura padrão da imagem */
margin: 10px auto;
z-index: 1;
}
#r3d_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#r3d_text {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#r3d_container:hover #r3d_text, #r3d_container.hover_effect #r3d_text {
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 transform: rotateY(180deg);
-ms-transform:rotateY(180deg);
 -webkit-box-shadow: -5px 5px 5px #aaa;
 -moz-box-shadow: -5px 5px 5px #aaa;
 box-shadow: -5px 5px 5px #aaa;
}
.r3dface {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.r3dface.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
-ms-transform:rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
 color: white;     /*cor do texto*/
  background-color: #aaa;    /*cor de fundo*/
}

2. Vá em Layout e abra um novo  Gadget Java/Script  e dentro cole:

Códigos

<div id="r3d_container" class="hover">
<div id="r3d_text" class="shadow">
<div class="front r3dface">
<img style="width: 300px; height: 250px; display: inline-block;" src="URL-DA-IMAGEM-AQUI"/>
</div>
<div class="back r3dface center">
<p>
ESCREVA SEU TEXTO AQUI.</p>
</div>
</div>
</div>

Não esqueça de incluir as urls das suas imagens.

No código acima o trecho  width: 300px; height: 250px; correspondem a largura e altura da imagem.

Se for usar na postagem, em vez de gadget deve ser inserido dentro da postagem a ser publicada, através da aba “editar html” no próprio editor de postagens do Blogger. Para chamar o efeito em uma imagem é necessário utilize o código html.

Caso queira mais imagens com esse efeito, apenas repita o procedimento quantas vezes for necessário.