Make Page Peel Effect Using CSS 3

Flip trick atau lebih dikenal orang dengan nama page peel effect, page flip, atau entah apa deh namanya, yang mana inti hasil kerjanya yaitu menampilkan konten ketika cursor diarahkan maka akan terlihat dibalik layar tancep :)) Kebanyakan Koben melihat yang menggunakan trik tersebut pasti memakai page peel effect using jQuery! Bahkan ada yang bergaya flash juga :-bd
Kalau membuat page flip effect memakai gambar seperti postingan dahulu page peel effect used image kekurangannya tidak bisa terbuka isi dari layar tancepnya sob =)) Dengan kemajuan fitur CSS3, sekarang kita bisa membuat page peel effect, murni memakai atribut CSS saja. Demo: "Perhatikan sudut kiri atas halaman ini"

Gimana...gimana...gimana (style ayu ting-ting spell) Mau enggak yang kayak begituan...

Code CSS 3 Page Peel

#page-peel {
width: 40px;
height: 40px;
position: fixed;
top: 0;
left: 0;
}
#page-peel:hover {
width: 350px;
height: 350px;
transition: ease 1s;
-webkit-transition: ease 1s;
-moz-transition: ease 1s;
-o-transition: ease 1s;
}
#page-peel-content {
background: transparent;
white-space: normal;
overflow: hidden;
width: 35px;
height: 35px;
position: fixed;
top: 0;
left: 0;
}
#page-peel-content:hover {
width: 300px;
height: 300px;
transition: ease 1s;
-webkit-transition: ease 1s;
-moz-transition: ease 1s;
-o-transition: ease 1s;
}

HTML Structure

<div id="page-peel-content">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=beben-koben" target="_blank">
<img src="http://IMAGE/RSS.png"/>
<img id="page-peel" src="http://IMAGE/PEEL-EFFECT.png"/>
</a>
</div>Download imagenya disini IMAGE, upload dan pasangkan di html struktur.
Lihat hasil kerja :)
Happy page peel \m/