Swift

Banner 011

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

Banner 011

Mobile Instant Message fev

Popunder Mobile2

Banner mobile

Popunder pc

Redes Sociais

Facebook 2018

Visitas

Flickr Images