Animasi Hover Effect Keren Dengan Webkit

Hari ini saya mau memperlihatkan animasi dari CSS3, tips ini saya dapatkan dari http://www.marcofolio.net/.
Di sana banyak sekali tips tricks CSS dan lumayan juga untuk menjadi referensi kita dalam mempelajari CSS3.

Tetapi tutorial yang ini hanya bisa menggunakan browser webkit (Google Chrome dan Safari), selain dari itu animasi dari tutorial ini kurang sempurna.

• 

  Subscribe Email

  Salam Blogger.! Hari ini...
  Selengkapnya
• 

  Komentar facebook

  Ternyata saya sudah...
  Selengkapnya
• 

  Widget Twitter

  Dalam artikel saya yang...
  Selengkapnya

Jika anda ingin mencobanya silahkan copy kode CSS nya di bawah ini.

ul h3, ul p, ul a {
 padding:0;
 margin:0;
}

#animasiwebkit { 
 list-style:none; 
 margin:100px 0; 
 height:550px; 
}

#animasiwebkit li {
 display:inline; 
 float:left;
 -webkit-perspective: 500;
 -moz-transform: skew(10deg);
 -o-transform: skew(10deg); 
 -webkit-transform-style: preserve-3d;
 -webkit-transition-property: perspective;
 -o-transition-property: perspective;
 -moz-transition-property: perspective; 
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s; 
}

#animasiwebkit li:hover { 
 -webkit-perspective: 5000;
 -moz-transform: skew(0deg);
 -o-transform: skew(0deg);
 z-index:9;
 margin:0px; 
}
 
#animasiwebkit li img { 
 border:10px solid #fcfcfc; 
 -webkit-transform: rotateY(30deg);
 -o-transform: rotateY(30deg);
 -moz-transform: rotateY(30deg);
 -moz-box-shadow:0 3px 10px #888;
 box-shadow:0 3px 10px #888;
 -webkit-box-shadow:0 3px 10px #888;
 -webkit-transition-property: transform;
 -webkit-transition-duration: 0.5s;
 -o-transition-property: transform; 
 -o-transition-duration: 0.5s;
 -moz-transition-property: transform; 
 -moz-transition-duration: 0.5s;
 width:160px;
 height:310px; 
}

#animasiwebkit li:hover img { 
 -webkit-transform: rotateY(0deg);
 -moz-transform: rotateY(0deg);
 -o-transform: rotateY(0deg); 
}

.info { 
 border:10px solid #fcfcfc; 
 padding:7px; 
 width:93px; 
 height:165px; 
 background-color:#deddcd; 
 margin:-195px 0 0 55px; 
 position:absolute;
 -moz-box-shadow:0 20px 40px #888;
 box-shadow:0 20px 40px #888; 
 -webkit-box-shadow:0 20px 40px #888;
 -webkit-transform: translateZ(30px) rotateY(30deg);
 -moz-transform: translateZ(30px) rotateY(30deg);
 -o-transform: translateZ(30px) rotateY(30deg);
 -webkit-transition-property: transform, box-shadow, margin; 
 -webkit-transition-duration: 0.5s;
 -moz-transition-property: transform, box-shadow, margin; 
 -moz-transition-duration: 0.5s;
 -o-transition-property: transform, box-shadow, margin; 
 -o-transition-duration: 0.5s; 
 line-height:normal;
}
 
#animasiwebkit li:hover .info { 
 -webkit-transform: rotateY(0deg);
 -moz-transform: rotateY(0deg);
 -o-transform: rotateY(0deg); 
 -webkit-box-shadow:0 5px 10px #888;
 box-shadow:0 5px 10px #888;
 -moz-box-shadow:0 5px 10px #888;
 margin:-175px 0 0 30px; 
}
 
.info h3 { 
 color:#7a3f3a; 
 font-variant: small-caps; 
 font-family:Georgia,serif,Times; 
 text-align:center; 
 padding-bottom:15px; 
}

.info p { padding-bottom:15px; }

.info a { 
 background-color:#7a3f3a; 
 padding:5px; 
 color:#eee; 
 text-decoration:none; 
 display:block; 
 width:84px; 
 text-align:center; 
 margin:0 auto;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;border-radius:5px; 
}

.info a:hover, .info a:focus { 
 background-color:#6a191f; 
 color:#fff; 
}

Berkiut kode HTML nya.

<ul id="animasiwebkit">
 <li>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs-4ZxHNmUXNgrJJaKZTcEe2DinBqqKu7R6_4tK6Ym8P_-0VIlNqc7V0RbN1BPno7KDxVJ9QnvB3h3-LP-2Cn7jYatWd_oxGkMpMq7IHDgeLIgwngCPAcMYxIq_DhWJKMSAdJuZaTeERVR/s1600/blogg_1.jpg" alt="Subscribe Email" />
  <div class="info">
   <h3>Subscribe Email</h3>
   <p>Salam Blogger.! Hari ini...</p>
   <a href="http://adityameilaz.blogspot.com/2012/03/memasang-widget-subscribe-email-untuk.html" target="_blank" title="Subscribe Email">Selengkapnya</a>
  </div>
 </li>
 <li>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF4an13ewBekA6UkLEMkrCp4ACr4N-qj3mB6CiXOweWdBg7_WOX7v8wfAdzAOsNol_SU1nNs17fWoZX9JFjZhK73OgUGo6lvcJtxOdvdc01rC94tnALHqkqANGBU1FmYNcsIEfi8AR8LUP/s1600/facebook.png" alt="Komentar facebook" />
  <div class="info">
   <h3>Komentar facebook</h3>
   <p>Ternyata saya sudah...</p>
   <a href="http://adityameilaz.blogspot.com/2011/03/kotak-komentar-facebook-versi-terbaru.html" target="_blank" title="Komentar facebook">Selengkapnya</a>
  </div>
 </li>
 <li>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoALp6hg_qAZsbMcI3zFBPb79LvqDSNOi514TfUfUmmiOVGQzgigcWPhRXg8B0NtSCP_s0w62PB-uNnaS0cGvKRed59HoueO2x0pzrkxUJVbi0f4b045lCSA4LflO3ZXgk47BqilknNxXL/s1600/twitter-icon.png" alt="Widget Twitter" />
  <div class="info">
   <h3>Widget Twitter</h3>
   <p>Dalam artikel saya yang...</p>
   <a href="http://adityameilaz.blogspot.com/2012/03/memasang-widget-tweet-twitter-di-blog.html" target="_blank" title="Widget Twitter">Selengkapnya</a>
  </div>
 </li>
</ul>

Semoga Bermanfaat!

Gabung ke group:

Follow @aditya_m_r

Share