.mynav { width:800px; margin:50px auto; display:inline-block; } .mynav .item { width:200px; height:100px; float:left; perspective:4000px; -webkit-perspective:4000px; margin-right:8px; } .mynav .item a { text-decoration:none; display:block; height:100px; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transition:all 1s; -webkit-transition:all 1s; } .mynav .item a:hover { transform:rotateX(90deg); -webkit-rotateX(90deg); } .mynav .item a p { text-align:center; line-height:100px; height:100px; font-family:"微软雅黑"; color:white; font-size:20px; margin:0px; border-radius:3px; } .mynav .item a p:first-child { background-color:coral; transform:translateZ(50px); } .mynav .item a p:last-child { background-color:#d655ff; transform:rotateX(-90deg) translateZ(-50px); -webkit-transform:rotateX(-90deg) translateZ(-50px); }