CSS Menu Melipat

Tweet

CSS Menu Animasi Melipat : Sekarang saya akan memberi trik yang berbeda..
yaitu membuat animasi menu melipat.
Jika sobat takut untuk memsangnya silahkan di cek dulu
dengan cara arahkan mouse sobat ke menu dibawah ini.

Products

Untuk melihat siapa admin cyiberart silahkan klik About Me Terimakasih banyak.

Hay sobat cyiberart,saya mohon utuk like halaman ini Fanspage Terimakasih banyak.

Jika sobat suka dengan blog ini silahkan klik Follow Terimakasih banyak.

Tukeran link yuks sob Tukeran link Terimakasih banyak.

Silahkan kedaftar menu untuk memilih menu lainya Daftar menuTerimakasih banyak

Gimana...?
Jika sobat suka silahkan dpraktekan sendiri.

Kode Css

<style type="text/css">
.cyiberart {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
/* default settings */
.cyiberart div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.cyiberart .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.cyiberart .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.cyiberart .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.cyiberart .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.cyiberart:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.cyiberart .sub img {display:block; float:left; padding:0 10px 10px 0;}
.cyiberart .sub p {font: normal 12px/15px arial, sans-serif; color:#000; padding:0; margin:0;}
.cyiberart .sub p span {display:block; font: bold 14px/18px arial, sans-serif; color:#ea0;}
.cyiberart .sub p a {font: normal 12px/15px arial, sans-serif; color:#09c;}
.cyiberart .sub p a:hover {text-decoration:none;}
.cyiberart a.main {display:block; font: bold 15px/35px arial, sans-serif; text-align:center; text-decoration:none; color:#fff; background:#069; border-radius:10px 10px 0 0; position:relative; z-index:100;}
</style>

Kode Html

<div id="info">
<div class="cyiberart">
<a class="main" href="http://www.blogger.com/post-create.g?blogID=8397213218864317483#url">Products</a>
<div class="sub first">
<img alt="" src="https://sites.google.com/site/archivesiugi/javascr/antivirus.png" />
Untuk melihat siapa admin cyiberart silahkan klik <a href="http://cyiberart.blogspot.com/#bengellz-cakep">About Me</a> Terimakasih banyak.
<div class="sub even">
<img alt="" src="https://sites.google.com/site/archivesiugi/javascr/penguin.png" />
Hay sobat cyiberart,saya mohon utuk like halaman ini <a href="https://www.facebook.com/pages/QUEENIDYA/252100348185248?ref=hl">Fanspage</a> Terimakasih banyak.
<div class="sub odd">
<img alt="" src="https://sites.google.com/site/archivesiugi/javascr/my_mac.png" />
Jika sobat suka dengan blog ini silahkan klik <a href="http://www.blogger.com/follow-blog.g?blogID=8397213218864317483">Follow</a> Terimakasih banyak.
<div class="sub even">
<img alt="" src="https://sites.google.com/site/archivesiugi/javascr/xchat.png" />
Tukeran link yuks sob <a comment-form="comment-form" cyiberart.blogspot.com="cyiberart.blogspot.com" href="http://www.blogger.com/post-create.g?blogID=8397213218864317483" http:="http:" tukeran-link.html="tukeran-link.html">Tukeran link</a> Terimakasih banyak.
<div class="sub odd last">
<img alt="" src="https://sites.google.com/site/archivesiugi/javascr/neotux.png" />Silahkan kedaftar menu untuk memilih menu lainya  <a href="http://cyiberart.blogspot.com/p/daftar-menu_7422.html">Daftar menu</a>Terimakasih banyak</div>
</div>
</div>
</div>
</div>
</div>
<div class="info">
</div>
<!-- end info -->