0 Membuat Efek Transformasi Dan Transisi Dengan CSS3

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Mau tahu yang dimaksud dalam tutorial ini ?
Lihatlah contohnya di bawah ini dan coba saja letakkan
cursor Anda tepat di atas ke-5 (lima) ikon yang ada :

• 
• 
• 
• 
• 

Kalau Anda ingin mencoba membuat yang seperti itu,
ikuti langkahnya seperti berikut ini :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode yang berikut ini lalu simpan.

<ul class="bubblewrap">
<li><a href="URL Stumbleupon Anda"><img src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="URL Facebook Anda"><img src="http://dynamicdrive.com/cssexamples/media/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="URL Digg Anda"><img src="http://dynamicdrive.com/cssexamples/media/digg.png" title="Add to Digg" /></a></li>
<li><a href="URL Twitter Anda"><img src="http://dynamicdrive.com/cssexamples/media/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="URL RSS Feed Anda"><img src="http://dynamicdrive.com/cssexamples/media/rss.png" title="Add RSS Feed" /></a></li>
</ul>

KETERANGAN :

Masukkan URL Stumbleupon, URL Facebook,
URL Digg, URL Twitter dan URL RSS Feed Anda
di tempat yang tersedia pada kode di atas.

3.   Lalu masuk ke Edit HTML.

4.   Carilah tag </head>

5.   Letakkanlah di atas tag </head>,
      kode yang ada di bawah ini.
      Pratinjau, simpan template Anda.

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

Selamat mencoba, good luck!