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” dê um Ctrl+F e procure pela tag ]]></b:skin>
e cole em cima 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 ( escreva uma postagem e coloque na tag html e colo o seguinte codigo modificando os que forem necessarios

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