这样写可以实现-慕课网

这样写可以实现

来源：3-2 JS部分

几尼Guineas

2014-12-24 15:12

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #my3dspace{
            -webkit-perspective:800;
            -moz-perspective:800;
            perspective:800;
            -webkit-perspective-origin:50% 50%;
            -moz-perspective-origin:50% 50%;
            perspective-origin:50% 50%;

            overflow:hidden;
        }
        #pagegroup{
            width:400px;
            height:400px;
            margin:0 auto;

            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            transform-style:preserve-3d;
            position:relative;
        }
        .page{
            width:360px;
            height:360px;
            padding:20px;
            background-color:#000000;

            color:white;

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

            position:absolute;
        }
        #page1{
            -webkit-transform-origin:bottom;
            -moz-transform-origin:bottom;
            transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
            -moz-transition:-moz-transform 1s linear;
            transition:transform 1s linear;
        }
        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform-origin:bottom;
            -moz-transform-origin:bottom;
            transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
            -moz-transition:-moz-transform 1s linear;
            transition:transform 1s linear;
            -webkit-transform:rotateX(90deg);
            -moz-transform:rotateX(90deg);
            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)";
           curPage.style.mozTransform="rotateX(-90deg)";
           curPage.style.Transform="rotateX(-90deg)";

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

        }
        function prev(){

           if(curIndex == 1)
               return;

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

           curIndex --;
           var prevPage = document.getElementById("page"+curIndex);
           prevPage.style.webkitTransform = "rotateX(0deg)";
           prevPage.style.mozTransform = "rotateX(0deg)";
           prevPage.style.Transform = "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> <a href="javascript:prev()">previous</a>
           </div>

</body>
</html>