CSS3d 基础

-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;
                 300px;
                margin:0px auto;
                -webkit-transform-style: preserve-3d;/* 设置其子元素的3D属性*/
                transform-style: preserve-3d;
            }
            .block li{
                height:100%;
                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="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>

3D翻页效果