Make jQuery Dock Menu use CSS3

Begini jika tidak ada bahan artikel post gaya punya, akhirnya korek-korek arsip mencari ide postingan :d Lists of The Inspiration menjadi tempat tujuan looking for an idea. Master @simurai selaku owner simurai.com mempunyai kategori postingan lab yang begitu memukau.
Dulu Koben pernah berbagi juga salah satu trik dari sana Toggle Effect Pure Use CSS3! Sekarang aku mau berbagi lagi membuat Dock Menu use jQuery tetapi memakai full 100% CSS3. Versi jQuery bisa sobat lihat di blog master Abu Farhan jQuery Dock Footer for Blogger, yang di adopsi dari article jQuery Dock Menu at Bottom Tiba giliran versi CSS yg di ambil dari lab simurai :p

Perhatikan pojok kanan bawah!
KODE CSS

#footer {
position: fixed;
z-index: 1000;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 200px;
padding: 0 5px;
left: 0;
right: 0;
bottom: 0;
background-color: #262626;
-webkit-transform: translate3d(0,100%,0);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform .3s cubic-bezier(.43, .10, .12, 1);
-moz-transition: -moz-transform .3s cubic-bezier(.43, .10, .12, 1);
-ms-transition: -ms-transform .3s cubic-bezier(.43, .10, .12, 1);
-o-transition: -o-transform .3s cubic-bezier(.43, .10, .12, 1);
transition: transform .3s cubic-bezier(.43, .10, .12, 1);
}
#footer:hover {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#footer > .stamp {
position: fixed;
bottom: 200px;
right: 0;
width: 120px;
height: 120px;
padding: 0 10px 0 0;
}
#footer > .stamp > .ink {
position: absolute;
width: 144px;
height: 71px;
bottom: 0;
right: 5px;
background: url('YOUR-IMAGE.JPG');
opacity: .5;
-webkit-transition: -webkit-transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
-moz-transition: -moz-transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
-ms-transition: -ms-transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
-o-transition: -o-transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
transition: transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
}
#footer:hover > .stamp > .ink {
opacity: 1;
-webkit-transform: translate3d(0,180px,0);
-moz-transform: translateY(180px);
-ms-transform: translateY(180px);
-o-transform: translateY(180px);
transform: translateY(180px);
}

.columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule: 0px dotted black;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule: 0px dotted black;
column-count: 3;
column-gap: 10px;
column-rule: 0px dotted black;
padding: 10px 5px;
color: #eee;
}

Gantikan YOUR-IMAGE.JPG dengan gambar karya kalian, dan jangan lupa mengubah tinggi lebar sesuai dengan gambarnya.

SYNTAX HTML

<div id="footer">

<div class="columns">
BLAH BLEH BLOH
</div>

        <div class="stamp">
            <div class="ink"></div>
        </div>

</div>

Pada ramuan diatas Koben sisipkan CSS tambahan berupa .columns Bila tidak mau, hapus saja bersama dengan syntax html <div class="columns">. . .</div>
Silahkan sobat kreasikan dengan imajinasi masing² supaya hasil lebih full stylish b-) Thanks simurai :)
Bonusnya kelupaan:
http://webstuffshare.com/demo/FeatureShowcase/index.html
http://cssdeck.com/item/466/stylish-css-switch-buttons
http://www.awwwards.com/the-best-css3-tools-experiments-and-demos-for-web-developers.html
http://www.1stwebdesigner.com/tutorials/css3-tutorials-2012/
Happy dock \m/