CSS3 3D Transform – Tutorial

E ai galera, tudo bom?
Hoje vamos conhecer mais um recurso muito interessante no CSS3, iremos montar uma transição em 3D para exibir o conteúdo de uma div!

1. CSS3 3D
Existem diversas maneiras de exibir o conteúdo de um item ao passar o mouse sobre ele, porém usando esse código de CSS vamos montar uma apresentação simples e muito legal.
O código é o seguinte:

<style>
      .wrapper {  
      display: inline-block;  
      width: 310px;  
      height: 100px;  
      vertical-align: top;  
      margin: 1em 1.5em 2em 0;  
      cursor: pointer;  
      position: relative;  
      font-family: Tahoma, Arial;  
      perspective: 4000px;  
      -webkit-perspective: 4000px;  
    }  
      
    .item {  
      height: 100px;  
      transform-style: preserve-3d;  
      transition: transform .6s;  
      -webkit-transform-style: preserve-3d;  
      -webkit-transition: -webkit-transform .6s;  
    }  
  
.item_off {  
  top: 0;  
  border-radius: 3px;  
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);  
  transform: translateZ(50px);  
  transition: all .6s;
  -webkit-transform: translateZ(50px);  
  -webkit-transition: all .6s;  
  width:250px;
  height:40px;
  padding:30px;
}  
  
.item .information {  
  display: block;  
  position: absolute;  
  top: 0;  
  height: 80px;  
  width: 290px;  
  text-align: left;  
  border-radius: 15px;  
  padding: 10px;  
  font-size: 12px;  
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);  
  box-shadow: none;  
  background: linear-gradient(to bottombottom,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);  
  transform: rotateX(-90deg) translateZ(50px);  
  transition: all .6s; 
  -webkit-transform: rotateX(-90deg) translateZ(50px);  
  -webkit-transition: all .6s;  
    
} 

.item:hover {  
  transform: translateZ(-60px) rotateX(95deg);  
  -webkit-transform: translateZ(-60px) rotateX(95deg);  
}  
  
  .item:hover .item_off {  
    box-shadow: none;  
    border-radius: 15px; 
    color:#FFF;
  }  
    
  .item:hover .information {  
    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);  
    border-radius: 3px;  
  }   
</style>

<div class="wrapper">  
  <div class="item">  
    <div class="item_off">Quer entrar em contato?</div>  
    <span class="information"> 
      <br /><br />
      <strong>Contato</strong> A maneira mais fácil de enviar sua mensagem.  
    </span>  
  </div>  
</div>  

Para visualizar funcionando:
JS Bin

O código parece extenso e complexo, mas os conceitos são simples e para repetir você só precisa criar novos objetos no HTML seguindo o primeiro.

2. CSS
Utilizamos dois elementos chaves para montar o efeito. O elemento .wrapper e o .item. O primeiro vai definir a perspectiva do elemento perante o usuário. Quando menor o valor do atributo perspective mais próximo o objeto fica. O segundo elemento (.item) será o responsável por apresentar a informação, girando quando o mouse estiver sobre ele ou fora.

Ao definir .item_off e .item .information vamos criar uma transição para manter o efeito mais bonito, ao girar os objetos vão mudar seu border-radius e o box-shadow.

Por fim no .item:hover realizamos a animação que gira o objeto e revela o texto. Notem que no .item:hover .item_off foi setado a propriedade color:#FFF isso visa esconder totalmente o texto após a transição.

Vale uma observação a tag -webkit utilizamos ela para que o Safari/Chrome renderizem corretamente o CSS e o efeito.

Simples e fácil, agora para replicar o efeito podemos copiar e colar o objeto wrapper!
Valeu a atenção e por hoje é só pessoal!
Se tiverem dúvidas ou comentários fiquem a vontade para usar o formulário logo abaixo.

Até semana que vem!