Creativity with CSS3 Transforms

Postingan kali ini masih sekitar CSS3, dan semoga semakin membuat sobat tergelitik guna mengasah skill individu. Masih ingat dengan roket bergerak kala mouse diarahkan, hasil ngasah skill juga tuh ;)) The Power of CSS3!
So trick itu dinamakan oleh para developer dengan nama Animation Using CSS 3 Transforms. Memberi efek zoom, berputar, mengecil, joget kekiri & kekanan, loncat keatas or kebawah bisa juga ;)) Berpulang dari blog salah satu master yang Beben Koben si bloglang anu ganteng kalem tea suka kunjungi OnWebDev, ada artikel mengenai jump effect on icons!
Digabungkan dengan efek transforms, dihasilkan deh jump sedikit slow motion pada iconnya :D

Demo jump effect on icons
Demo diatas masih menggunakan atribut CSS standar sob. Ternyata membuat efek icon lompat keatas memakai CSS standar bisa juga ;)) (memang master) :-bd
Sekarang gimana jika dibubuhi bumbu CSS3 transforms agar loncat ikonnya bisa sedikit lebih dinamis ;) Biar sedikit gereget coba tengok beberapa efek transfroms berikut ini ya :">

Klik buat mengambil link!

Kode CSS3

#sosial{
width: 276px;
height: 64px;
margin: 0 auto;
padding: 0;
list-style: none;
}

#sosial li {
width: 64px;
height: 64px;
float: left;
margin-right: 5px;
}

#sosial a {
display: block;
width: 100%;
height: 100%;
float: left;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 0 32px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out
}

#sosial a:hover {
background-position: 0 5px;
-webkit-transform:translate(0,.1em);
-moz-transform:translate(0,.1em);
-o-transform:translate(0,.1em)
}

#facebook {
background-image: url(http://your-image-link-here.png)
}

#linkedin {
background-image: url(http://your-image-link-here.png)
}

#twitter {
background-image: url(http://your-image-link-here.png)
}

#youtube {
background-image: url(http://your-image-link-here.png)
}

Kode HTML

<ul id="sosial">
<li><a href="#" id="facebook" title="">Facebook</a></li>
<li><a href="#" id="linkedin" title="">Linkedin</a></li>
<li><a href="#" id="twitter" title="">Twitter</a></li>
<li><a href="#" id="youtube" title="">YouTube</a></li>
</ul>

Save

Demo
Klik buat mengambil link!
Bagus kan sob ;) keren atuh yah :p Sok silahkan dikreasikan lagi menurut kebutuhan :)
Karena atribut ID sosial disini memakai margin: 0 auto (posisi akan berada ditengah), maka kalo sobat mau menambahkan icon, variabel width kalikan dengan banyak icon & ditambah margin 5px dikalikan dgn jml icon juga. Kalo mau dikiri tinggal hapus saja var. width and margin dengan float: left, marginnya terserah :P
bye bye :-h