课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

爱折腾，求助？！

来源：2-5 练习题

Daniel_

2015-01-21 16:15

 function next(){
                var curPage=document.getElementById("page"+curIndex);
                curPage.style.webkitTransform="rotateX(-90deg)";
                curIndex++;
                var nextPage = document.getElementById("page"+curIndex);
                nextPage.style.webkitTransform="rotateX(0deg)";
        }

折腾了一个下午了，还是不行。如果我想实现点击next可以一直从页码6循环到页码1怎么写代码呢？

写回答 关注

1回答

  • 学习muke1
    2015-12-21 19:04:42

    <html>    

    <head>    

    <title></title>    

    <style>    

    #my3dspace{    

    -webkit-perspective: 800;    

    -webkit-perspective-origin: 50% 50%;    

    overflow:hidden;    

    }    

    #pagegroup{    

    width:400px;    

    height:400px;    

    margin:0 auto;    

    -webkit-transform-style:preserve-3d;    

    position: relative;    

    }    

    .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 1

    Yinsio...

    谢谢，虽然是老师讲的动画效果，但是我提前看到了，能够全部理解应用到的知识，这对我帮助很大。

    2016-11-12 11:01:01

    共 1 条回复 >

CSS3 3D 特效

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

78572 学习 · 425 问题

查看课程

相似问题

求助魔方问题

回答 2

求助：关于Firefox无3d效果

回答 7

求助 ：在opera浏览器中无3d效果

回答 3

黑块是从中间折的，这怎么解决

回答 2

求解答问题

回答 3

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