                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

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

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

源自：CSS3 3D 特效 3-2

关注问题我要回答

916

操作

收起

1 回答

叶星蓉回答被采纳 +3 积分
2015-12-25

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