Animação 3D em imagem com css3

Graças ao CSS3, podemos criar efeitos e animações incríveis sem necessidade de usar JavaScript.
  O uso de Css3 facilita o trabalho de muitos designers.
Uma das características inovadoras em CSS3 é a capacidade de rotacionar elementos, proporcionando um efeito 3D.
Neste artigo irei mostrar como incluir um efeito de rotação 3D em imagem, que ao passar o mouse em cima da imagem, revela um conteúdo.




Para seguir este tutorial, você deve ter no mínimo um conhecimento básico de HTML e CSS, especialmente CSS3.


1- CÓDIGO CSS

Acesse o painel do blogger, clique no menu “modelo >>Editar HTML” e procure pela tag ]]></b:skin>
e cole ANTES dela:

/*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- CÓDIGO HTML

<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.

Lembrando que o código acima 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.