这样写可以实现-慕课网

这样写可以实现

来源：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>

写回答关注

2回答

慕田峪9186816

2022-07-06 07:30:36

++和--既可以出现在操作数的左边，也可以出现在右边，但结果是不同滴。请认真阅读算术运算符中示例，已经讲解很清楚
n q y a c v

0 0
qq_风雨中坚强_0

2016-04-16 23:12:01

可是我放在火狐浏览器中不能实现
只能在谷歌中能实现这种效果

0 0

CSS3 3D 特效

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

78574 学习 · 425 问题

查看课程

相似问题

不知道这样写合不合规矩，可是效果能实现，请问有没有问题

回答 1

transition可以实现箭头动态流动的效果吗

回答 1

这样写对吗

回答 2

3d场景的实现

回答 3

这样写为什么不行？求指导

回答 2

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