@charset 'sut-8'; body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; font-weight:normal; } body,button,input,select,textarea { -webkit-text-size-adjust:none; font:12px/1.5 Arial,microsoft yahei,sans-serif } h1,h2,h3,h4,h5,h6 { font-size:100% } address,cite,dfn,em,var { font-style:normal } ul,ol,li { list-style:none } a { text-decoration:none } legend { color:#000 } fieldset,img { border:0; } section,article,aside,header,footer,nav,dialog,figure { display:block; } figure { margin:0; } button,input,select,textarea { font-size:100% } table { border-collapse:collapse; border-spacing:0 } .clear { display:block; height:0; overflow:hidden; clear:both } .clearfix:after { content:'\20'; display:block; height:0; clear:both } .clearfix { *zoom:1 } a:link,a:visited { text-decoration:none } a:hover,a:active { text-decoration:underline } a { blr:expression_r(this.onFocus=this.blur()) } a { outline:none; } .none { display:none; } .block { display:block; } .noBg { background:none !important; } .noBd { border:none !important; } .noPd { padding:0 !important; } *,*:before,*:after { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } a:hover { text-decoration:none; color:#000; transition:color .5s; -webkit-transition:color .5s; -moz-transition:color .5s; } body { position:relative; } .nav { width:722px; margin:50px auto; background-color:#6cf; border:1px #ccc solid; } .nav:after { clear:both; display:block; overflow:hidden; content:""; } .nav ul li { width:140px; height:60px; margin-right:5px; float:left; perspective:4000px; -webkit-perspective:4000px; } .nav ul li:nth-last-child(1) { margin-right:0; } .nav ul li a { display:block; height:60px; text-decoration:none; transition:all .5s; transform-style:preserve-3d; } .nav ul li a p { height:60px; margin:0; line-height:60px; color:#fff; text-align:center; font-size:16px; font-family:"Microsoft Yahei"; border-radius:2px; transition:all .5s; } .nav ul li a p:first-child { background-color:#090; transform:translateZ(30px); } .nav ul li a p:last-child { background-color:#009; transform:translateZ(30px) rotateX(-90deg); margin-top:-30px; } .nav ul li a:hover { transform:rotateX(90deg); } .nav ul li a:hover p:last-child { margin-top:0; transform:translateZ(0) rotateX(-90deg); }
通过html和css实现3D导航翻转效果