做了一个在Chrome上可以运行的版本~-慕课网

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

来源：3-2 JS部分

繁星鸢尾

2016-06-20 12:25

<!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>

写回答关注

1回答

繁星鸢尾

2016-06-20 12:26:32

这个版本可以在chrome上运行~第一遍怎么都不对，后来认真的敲了第二遍才成功，真的需要很细心的去做。大家加油！

0 1

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78571 学习 · 425 问题

查看课程

相似问题

火狐上到底可不可以啊？

回答 2

做了个小骰子

回答 3

我写了一个翻页的，可是页面上的数字不跟着翻？怎么解

回答 1

马一下，希望做个更好的

回答 1

可以给个中间的transform-origin:center; 的demo吗

回答 2

打开慕课网App查看更多内容