-webkit-transform-style:-webkit-preserve-3d;//设置3D转换 translateX:px; 平移 translateY:px; translateZ:px; rotateX:deg; 旋转 rotateY:deg; rotateZ:deg; transform-origin://旋转中心 X轴 left center right Y轴 top center bottom Z轴 length px 三维属性 -webkit-perspective:800; 表示Z轴距离，浏览器距离3D物体的距离 -webkit-perspective-origin:50% 50%;表示浏览器正中心看过去
<style type="text/css"> *{margin:0px;padding:0px;} ul{list-style:none;} #test{ margin-top: 100px; -webkit-perspective:800; perspective:800; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; overflow: hidden; } .block{ position:relative; height:300px; width: 300px; margin:0px auto; -webkit-transform-style: preserve-3d;/* 设置其子元素的3D属性*/ transform-style: preserve-3d; } .block li{ height:100%; width:100%; background-color: #000; color:#FFF; position:absolute; line-height:100%; font-size:300px; text-align:center; -webkit-transition:-webkit-transform 1s linear; transition:transform 1s linear; -webkit-transform-origin:bottom; transform-origin:bottom; } #test2,#test3,#test4,#test5,#test6{ -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } </style> </head> <body> <!--创建3D场景--> <div id="test"> <!--内容--> <ul class="block"> <li id=‘test1‘>1</li> <li id=‘test2‘>2</li> <li id=‘test3‘>3</li> <li id=‘test4‘>4</li> <li id=‘test5‘>5</li> <li id=‘test6‘>6</li> </ul> </div> <div class="btn" style="width:300px;margin:0 auto;text-align:center;"> <a href="javascript:prev()">prev</a> <a href="javascript:next()">next</a> </div> </body> <script type="text/javascript"> var clearIndex = 1; function next(){ if(clearIndex==6){ return; } var currentIndex = document.getElementById(‘test‘+clearIndex); currentIndex.style.transform = ‘rotateX(-90deg)‘; currentIndex.style.webkitTransform = ‘rotateX(-90deg)‘; clearIndex++; var nextIndex = document.getElementById(‘test‘+clearIndex); nextIndex.style.transform = ‘rotateX(0deg)‘; nextIndex.style.webkitTransform = ‘rotateX(0deg)‘; } function prev(){ if(clearIndex==1){ return; } var currentIndex = document.getElementById(‘test‘+clearIndex); currentIndex.style.transform = ‘rotateX(90deg)‘; currentIndex.style.webkitTransform = ‘rotateX(90deg)‘; clearIndex--; var prevIndex = document.getElementById(‘test‘+clearIndex); prevIndex.style.transform = ‘rotateX(0deg)‘; prevIndex.style.webkitTransform = ‘rotateX(0deg)‘; } </script>
原文：http://www.cnblogs.com/bruce-gou/p/5631379.html