A3DUPCSS3

Animação 3D usando puro CSS3(11/09/2014)

by Mairink Oemes

HTML

<ul id="movieposters">
   <li>
      <img src="https://lh4.googleusercontent.com/-SXvoXZbnFQE/VBGcMcZ2AQI/AAAAAAAAG7k/jzgHSDzx4Oc/w300-h450-no/Os%2B5%2BElementos%2Bda%2BNatureza.JPG" alt="Os 5 Elementos da Natureza" />
      <div class="movieinfo">
         <h3>Os 5 Elementos da Natureza</h3>
         <p>Monumento "Os 5 Elementos da Natureza", em Coronel Fabriciano, Minas Gerais, Brasil. ...</p>
         <a href="URL DO POST" title="TÍTULO">Mais informações</a>
      </div>
   </li>
   <ul id="movieposters">
   <li>
      <img src="https://lh6.googleusercontent.com/-XwbwXUTw11E/VBGb6QymhjI/AAAAAAAAG7E/AaoGPIIbW7I/w300-h450-no/A_beleza_da_natureza_ap%C3%B3s_a_chuva..JPG" alt="A beleza da natureza após a chuva" />
      <div class="movieinfo">
         <h3>A beleza da natureza após a chuva</h3>
         <p>Uma das minha grandes paixões é fotografar a natureza após a chuva. Tudo fica mais verde, mais vivo, mais encantador. ...</p>
         <a href="URL DO POST" title="beleza da natureza após a chuva">Mais informações</a>
      </div>
   </li>
<ul id="movieposters">
   <li>
      <img src="https://lh6.googleusercontent.com/-qe964OtR0-I/VBGcWQSYlXI/AAAAAAAAG78/u0LzY6w97-c/w300-h450-no/Tucano.JPG" alt="Tucano" />
      <div class="movieinfo">
         <h3>Tucano</h3>
         <p>RSão designadas por tucano as aves da família Ramphastidae que vivem nas florestas da América Central e América do Sul. ...</p>
         <a href="URL DO POST" title="Tucano">Mais informações</a>
      </div>
   </li>
</ul>

CSS

/* Vitrine Mult-focos */
#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; }

JavaScript

<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>