今天来个3D旋转菜单，是纯css3实现的，主要用到transform,transition,backface-visibility。
主要是transform这个变换，它是今天猪脚。
transform里有transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
transform-origin 属性允许您改变被转换元素的位置。
backface-visibility 属性定义当元素不面向屏幕时是否可见。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav{margin:0; padding:50px;} .nav li{float:left; list-style:none; padding:0 15px; -webkit-perspective:100px;} .nav a{float:left; position:relative; font:14px/20px "宋体"; text-decoration:none; -webkit-transform-style:preserve-3d; transition:.5s; -webkit-transform-origin:center center -10px;} .nav a:hover{ -webkit-transform:rotateX(-90deg);} .nav span{float:left; width:60px; text-align:center; -webkit-backface-visibility:hidden;} .nav span:nth-of-type(2){ position:absolute; left:0; top:-20px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);} </style> </head> <body> <ul class="nav"> <a href="#"> <span>选项一</span> <span>选项1</span> </a> <a href="#"> <span>选项二</span> <span>选项2</span> </a> <a href="#"> <span>选项三</span> <span>选项3</span> </a> <a href="#"> <span>选项四</span> <span>选项4</span> </a> </ul> </body> </html>