Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

avatar
Fundador

3D Image Rotating


: PunBB : : PhpBB2 : : PhpBB3 : : Invision :
--> Código CSS <--
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 /---*/

--> Código da Imagem <--
*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.

--> Visualização Final <--
Passe o mouse na Imagem.







ESCREVA SEU TEXTO AQUI.













Desenvolvido por D'Leandro™ | SGBR™
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 Vargas

avatar
Moderador
Isso é Simplesmente Fantástico.
Ver perfil do usuário

#3
 StyLe®

avatar
Membro
Muito bom o efeito gostei bastante
Ver perfil do usuário

#4
 Narutofake

avatar
Membro
Nooosa Fantastico Obrigado por Disponibilizar
Ver perfil do usuário

#5
 D'Leandro™

avatar
Fundador
Foi um Prazer, Continue acompanhando o forum, eu estou desenvolvendo novos códigos diariamente.
Ver perfil do usuário

#6
 Narutofake

avatar
Membro
Olá, Gostaria de Entrar em contac-to com o mesmo tem como ?
Ver perfil do usuário

#7
 D'Leandro™

avatar
Fundador
Gostaria de entrar em contato comigo?
Ver perfil do usuário

#8
 Narutofake

avatar
Membro
Sim,, Adicione-me mateus.reidelas@hotmail.com
Ver perfil do usuário

#9
 D'Leandro™

avatar
Fundador
Pronto, adicionei voce...
Ver perfil do usuário

#10
 Narutofake

avatar
Membro
iREI ACEITAR.........
Ver perfil do usuário

#11
 D'Leandro™

avatar
Fundador
Não será mais Rápido, falar no xat do forum?
Ou então por MP.
Ver perfil do usuário

#12
 Narutofake

avatar
Membro
Qual link? ativa o chatbox =/
Ver perfil do usuário

#13
 D'Leandro™

avatar
Fundador
Ver perfil do usuário

#14
 Narutofake

avatar
Membro
Vou testar novamente'-'
Ver perfil do usuário

#15
 Vic

avatar
Membro
Wooow
Ver perfil do usuário

#16
 'Fusion

avatar
Membro
gostei muito show pra tutoriais vlw ae

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#17
 Bookmarlucas654

avatar
Membro
QUE SHOW CARA, INCRÍVEL :O
Ps.: Era bom que ficasse a borda desde o inicio(sem aproximar o mouse), mas ficou PERFEITO.... :3
Ver perfil do usuário

#18
 D'Leandro™

avatar
Fundador
Aproveite muito, porque eu estou pensando em torna-lo vip!
Ver perfil do usuário

#19
 sergio44

avatar
Membro
thanks
Ver perfil do usuário

#20
 Conteúdo patrocinado