Início
Curtir
: PunBB : : PhpBB2 : : PhpBB3 : : Invision :
- Código:
/*---/ Efeito 3D Imagens /---*/
#r3d_container {
position: relative;
width: 300px; /* Definir a largura padrão da imagem */
height: 250px; /* Definir a 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);
box-shadow: -2px -2px 2px #aaa;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-o-border-radius:5px 5px 0 0;
}
.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;
border-radius: 6px !important;
padding: -20px;
text-align: center;
color: #000000; /* Definir a cor do texto*/
background-color: ; /* Definir a cor de fundo*/
}
/*---/ Creditos: 2012
Staffer Group BR
/---*/
/*---/ http://staffergroupbr.stuning.net /---*/
*Cole este código sempre que quiser ativar o efeito.
- Código:
<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="LINK DA IMAGEM AQUI."/>
</div>
<div class="back r3dface center">
<p>
ESCREVA SEU TEXTO AQUI.</p>
</div>
</div>
</div><br><br><br>
Procure por: LINK DA IMAGEM AQUI.
Cole o link da Imagem.
Procure por: ESCREVA SEU TEXTO AQUI.
Escreva uma descrição da imagem.
Cole o link da Imagem.
Procure por: ESCREVA SEU TEXTO AQUI.
Escreva uma descrição da imagem.
Passe o mouse na Imagem.
ESCREVA SEU TEXTO AQUI.
Desenvolvido por D'Leandro™ | SGBR™
Editado e Postado por 2012 © Staffer Group BR™
Editado e Postado por 2012 © Staffer Group BR™
