Animação 3D usando puro CSS3

Olá amigos Mult-focos, neste post vamos ver uma linda animação 3D usando puro CSS3, aqui está um exemplo da muito poderosa animação CSS3 e efeitos 3D. Apenas certifique se você está executando a versão mais recente de um webkit navegador baseado (Apple Safari ou Google Chrome) para ver o efeito, pois até o momento o internet explore e o Firefox não são compatíveis com o efeito.

Veja o demo clicando no botão abaixo.

DEMO HTML
(Clique na seta para ver o código)

<ul id="movieposters">
<li>
<img src="URL DA IMAGEM" alt="NOME DA IMAGEM" />
<div class="movieinfo">
<h3>TÍTULO</h3>
<p>RESUMO ...</p>
<a href="URL DO POST" title="TÍTULO">Mais informações</a>
</div>
</li>
<ul id="movieposters">
<li>
<img src="URL DA IMAGEM" alt="NOME DA IMAGEM" />
<div class="movieinfo">
<h3>TÍTULO</h3>
<p>RESUMO ...</p>
<a href="URL DO POST" title="TÍTULO">Mais informações</a>
</div>
</li>
<ul id="movieposters">
<li>
<img src="URL DA IMAGEM" alt="NOME DA IMAGEM" />
<div class="movieinfo">
<h3>TÍTULO</h3>
<p>RESUMO ...</p>
<a href="URL DO POST" title="TÍTULO">Mais informações</a>
</div>
</li>
</ul>

---

CSS
(Clique na seta para ver o código)

/* Animação 3D usando puro CSS3 */
#movieposters
{ list-style:none; margin:100px 0; height:550px; }
#movieposters li
{ display:inline; float:left;
-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
#movieposters li:hover
{ -webkit-perspective: 5000; }
#movieposters li img
{ border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);
-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
#movieposters li:hover img
{ -webkit-transform: rotateY(0deg); }
.movieinfo { border:10px solid #fcfafa; padding:20px; width:200px; height:180px; background-color:#deddcd; margin:-195px
0 0 55px; position:absolute;
-moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;
-webkit-transform: translateZ(30px) rotateY(30deg);
-webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; }

/* Animate everything to their 2d state when hovering the parent. */
#movieposters li:hover .movieinfo
{ -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px #888; margin:-175px 0 0 30px; }
.movieinfo h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-
bottom:15px; }
.movieinfo p { padding-bottom:15px; }
.movieinfo a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; width:80px;
text-align:center; margin:0 auto;
-moz-border-radius:5px; -webkit-border-radius:5px; }
.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }

---

Créditos http://www.marcofolio.net/

---

---