jquery和css3实现的炫酷时尚的菜单导航

<div style="position: relative; height: 400px; width: 825px; margin: auto;"><div class="contener"><div id="corp_page" style="overflow: scroll"><div style="width: 100%"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="padding: 10px; font-weight: 100; color: #ffffff;" valign="top">WIFEO/CODE</td></tr><tr><td style="padding: 10px;" valign="top">Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentiacrudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur.quorum pars necati, alii puniti bonorum multatione actique laribus suis extorresnullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, etcivili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentaedomus et clarae.</td></tr></tbody></table></div></div></div><div class="menu">Item 2<br /><br />Item 3<br /><br />Item 4<br /><br /><img id="btn_menu_close" src="2.png" style="cursor: pointer;" /></div><div style="top: 0; left: 0; position: absolute; cursor: pointer;"><img id="btn_menu" src="1.png" /></div></div>

.contener{-webkit-perspective:600px;-moz-perspective:600px;-ms-perspective:600px;perspective:600px;top: 0;bottom: 0;left: 0;right:0;position: absolute;margin: 50px;z-index: 2;}#corp_page{top: 0;bottom: 0;left: 0;right:0;position: absolute;background-color:#DC4B39;padding: 20px;-webkit-transform: rotateY( 0deg );-webkit-transition: all .3s;-webkit-transform-origin: 100% 100%;-webkit-transform-style: preserve-3d;-moz-transform: rotateY( 0deg );-moz-transition: all .3s;-moz-transform-origin: 100% 100%;-moz-transform-style: preserve-3d;-ms-transform: rotateY( 0deg );-ms-transition: all .3s;-ms-transform-origin: 100% 100%;-ms-transform-style:;transform: rotateY( 0deg );transition: all .3s;transform-origin: 100% 100%;transform-style: preserve-3d;}.menu{ top:0;bottom:0;left:90px;width: 200px;position: absolute;margin: 5px;display: none;margin-top:50px;background-color:transparent;}

$(document).ready(function () {$('#btn_menu').click(function () {$("#corp_page").css({"-webkit-transform": "rotateY(-20deg)","-webkit-transition": "all .4s linear","-webkit-transform-origin": "100% 100%","-webkit-transform-style": "preserve-3d","-moz-transform": "rotateY(-20deg)","-moz-transition": "all .4s","-moz-transform-origin": "100% 100%","-moz-transform-style": "preserve-3d","-ms-transform": "rotateY(-20deg)","-ms-transition": "all .4s","-ms-transform-origin": "100% 100%","-ms-transform-style": "preserve-3d","transform": "rotateY(-20deg)","transition": "all .4s","transform-origin": "100% 100%","transform-style": "preserve-3d"});$(".menu").delay(170).css({"z-index": "5","-webkit-transition": "all .4s","-moz-transition": "all .4s","-ms-transition": "all .4s","transition": "all .4s"}).fadeIn("fast");});$('#btn_menu_close,#corp_page').click(function () {$(".menu").fadeOut("fast").css({"z-index": "1","-webkit-transition": "all .4s","-moz-transition": "all .4s","-ms-transition": "all .4s","transition": "all .4s"});$("#corp_page").css({"-webkit-transform": "rotateY(0deg)","-webkit-transition": "all .7s linear","-webkit-transform-origin": "100% 100%","-webkit-transform-style": "preserve-3d","-moz-transform": "rotateY(0deg)","-moz-transition": "all .7s","-moz-transform-origin": "100% 100%","-moz-transform-style": "preserve-3d","-ms-transform": "rotateY(0deg)","-ms-transition": "all .7s","-ms-transform-origin": "100% 100%","-ms-transform-style": "preserve-3d","transform": "rotateY(0deg)","transition": "all .7s","transform-origin": "100% 100%","transform-style": "preserve-3d"});});})