Memuat Halaman
"Animasi Hover Effect Keren Dengan Webkit"
Koneksi lambat? | Gunakan blog dalam versi mobile.
Tetap berusaha terhubung dengan Adityas Blog
Coba gunakan blog dalam versi mobile atau tekan F5 untuk memuat ulang halaman.

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.
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="http://1.bp.blogspot.com/-s8tcYKo-0wY/T2sMwcfztbI/AAAAAAAAAeU/CB6WEua08pw/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="http://4.bp.blogspot.com/-LBHneEuiwsM/T2sTrEWUFVI/AAAAAAAAAek/6ZpA3ta9sL0/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="http://2.bp.blogspot.com/-6sZAS1hRJMI/T3BzGp6EZYI/AAAAAAAAArQ/i8FoXnMx-4o/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:

Artikel Terkait

1 Respon Komentar

Nurrohman, said...
July 9, 2012 at 10:32 PM

lumayan sambil belajar gan...

Tinggalkan Komentar Anda?

Komentar anda akan dihapus jika :
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar

:a: :b: :c: :d: :e: :f:
:g: :h: :i: :j:

Emotion lainnya?