                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

做了一个在Chrome上可以运行的版本~

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        #my3dspace{
            -webkit-perspective:800;
            -webkit-perspective-origin:50% 50%;
            overflow:hidden;
        }
        
        #pagegroup{
            width:400px;
            height:400px;
            margin:0 auto;
            position:relative;
            -webkit-transform-style:preserve-3d;
        }
        
        .page{
            width:360px;
            height:360px;
            padding:20px;
            background-color: black;
            color:white;

            font-weight: bold;
            font-size:360px;
            line-height: 360px;
            text-align: center;

            position:absolute;
        }

        #page1{
            -webkit-transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
        }
        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
            -webkit-transform:rotateX(90deg);
        }

        #op{
            text-align:center;
            margin:40px auto;
        }
    </style>

    <script type="text/javascript">
        var curIndex=1;

        function next(){
            if(curIndex==6) return;

            var curPage = document.getElementById("page"+curIndex);
            curPage.style.webkitTransform = "rotateX(-90deg)";

            curIndex++;
            var nextPage = document.getElementById("page"+curIndex);
            nextPage.style.webkitTransform = "rotateX(0deg)";
        }

        function prev(){
            if(curIndex==1) return;

            var curPage = document.getElementById("page"+curIndex);
            curPage.style.webkitTransform = "rotateX(90deg)";

            curIndex--;
            var prevPage = document.getElementById("page"+curIndex);
            prevPage.style.webkitTransform = "rotateX(0deg)";
        }
    </script>
</head>
<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
        </div>
    </div>

    <div id="op">
        <a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">previous</a>
    </div>
</body>
</html>