问答详情
源自：3-2 JS部分

怎么没有出来 我用的是火狐

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3d 数字变换</title>
    <style type="text/css">
    .box{-moz-perspective:800px;
        -moz-perspective-orign:50% 50%;
        overflow: hidden;}
        #pagegroup{
            width:400px;height: 400px;
            -moz-transform-style:preserve-3d;
            /*position: relative;*/
            margin:0 auto;
        }
        .page{width:360px;height: 360px; background-color: black;font-size: 360px;line-heignt:360px;color: white; text-align: center;/*position: absolute;*/

        }
        #page1{-moz-transform-orign:bottom;
            -moz-transition:bottom 2s linear;}
        #page2,#page3,#page4,#page5,#page6{
            -moz-transform-orign:bottom;
            -moz-transition:bottom 2s linear;
            -moz-transform:rotateX(90deg);

        }
        .op{text-align:center}
    </style>
    <script type="text/javascript">
    
 var curIndex = 1;
function next(){
if(curIndex==6)
{
return;
}
var curPage = document.getElementById("page"+curIndex);
curPage.style.mozTransform = "rotateX(-90deg)";
 
curIndex++;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.mozTransform = "rotateX(0deg)";
}
function pre(){
if(curIndex==1)
{
return;
}
var curPage = document.getElementById("page"+curIndex);
curPage.style.mozTransform = "rotateX(90deg)";
 
curIndex--;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.mozTransform = "rotateX(0deg)";
}

    </script>
</head>
<body>
<div>
    <div id="pagegroup">
        <div id="page1">1</div>
        <div id="page2">2</div>
        <div id="page3">3</div>
        <div id="page4">4</div>
        <div id="page5">5</div>
        <div id="page6">6</div>
    </div>
</div>
<div>
    <a href="javascript:next()">下一张</a>
    <a href="javascript:pre()">上一张</a>

</div>

</body>
</html>

提问者：周木杉 2015-12-20 19:34

个回答

  • 叶星蓉
    2015-12-25 14:53:03
    已采纳 

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #my3dspace{
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;
-moz-perspective: 800;
            -moz-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: 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;
             -moz-transform-origin:bottom;
            -moz-transition: transform 1s linear;
             transform-origin:bottom;
            transition: transform 1s linear;
        }
        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform-origin:bottom;
            -webkit-transition: -webkit-transform 1s linear;
            -webkit-transform: rotateX(90deg);
            -moz-transform-origin:bottom;
            -moz-transition: transform 1s linear;
            -moz-transform: rotateX(90deg);
        }

        #op{
            text-align:center;
            margin: 40px auto;
        }
        </style>
    </head>
    <script type="text/javascript">
        
        var curIndex=1;
        function next(startPage,endPage){
            if(curIndex==endPage){
                for(var i=startPage;i<endPage+1;){
                    document.getElementById("page"+[i]).style.webkitTransform="rotateX(90deg)";
                    i++;
                }
                document.getElementById("page"+startPage).style.webkitTransform="rotateX(0deg)";
                curIndex=startPage;
            }else{
            var cur = document.getElementById("page"+curIndex);
            cur.style.webkitTransform="rotateX(-90deg)";
            cur.style.MozTransform="rotateX(-90deg)";
            cur.style.transform="rotateX(-90deg)";
            curIndex++;
            var next = document.getElementById("page"+curIndex);
            next.style.webkitTransform="rotateX(0deg)";
            next.style.MozTransform="rotateX(0deg)";
            next.style.transform="rotateX(0deg)";
            }
        }
        function prev(startPage,endPage){
            if(curIndex==startPage){
                for(var i=endPage-1;i>startPage-1;){
                    document.getElementById("page"+[i]).style.webkitTransform="rotateX(-90deg)";
                    i--;
                }
                document.getElementById("page"+endPage).style.webkitTransform="rotateX(0deg)";
                curIndex=endPage;
            }else{
            var cur = document.getElementById("page"+curIndex);
            cur.style.webkitTransform="rotateX(90deg)";
            curIndex--;
            var prev = document.getElementById("page"+curIndex);
            prev.style.webkitTransform="rotateX(0deg)";
            }
        }
    </script>
    <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(1,6)">next</a>&nbsp;<a href="javascript:prev(1,6)">previous</a>
    </div>
    </body>
</html>

    把原来的transform样式改为火狐的，js的样式要cur.style.MozTransform="rotateX(-90deg)";只修改了一下next(),另外一个自己改O(∩_∩)O哈！

    1