Swift

Efeito de animação 3D em imagem com puro 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.
[dica]Atenção: o resultado deste efeito só funcionará perfeitamente como pretendido em navegadores que suportam transições e animações em CSS3.[/dica]
Para seguir este tutorial, você deve ter no mínimo um conhecimento básico de HTML e CSS, especialmente CSS3.

((Passe o mouse n a imagem abaixo e veja o efeito))

O processo de inserção dos códigos para usar este efeito em imagens é simples. Siga os passos a seguir.

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.

You Might Also Like

0 comentários

Facebook 2018

Visitas

Instant Message fev

Link Direto Fev

Mobile Instant Message fev

Banner Rodapé pc

Banner Mobile Definitivo 2018

Popunder Mobile Definitivo

Banner Mobile Definitivo

Instage Mensagem pc

Popunder Definitivo

Banner video

Banner Mobile 20188

Banner Mobile 2018

Popunder Mobile Real

Popunder Mobile

Flickr Images