浏览器兼容-慕课网

浏览器兼容

来源：3-2 JS部分

zdddrszj

2014-12-19 09:28

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    #my3dspace{
        perspective:800;
        -webkit-perspective: 800;
        -moz-perspective:800;
        -ms-perspective:800;
        
        perspective-origin:50% 50%;
        -webkit-perspective-origin: 50% 50%;
        -moz-perspective-origin:50% 50%;
        -ms-perspective-origin:50% 50%;
        
        overflow: hidden;
    }
    
    #pagegroup{
        width: 400px;
        height: 400px;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
        position: relative;
        margin: 0 auto;
        backface-visibility:hidden;
    }
    
    .page{
        width: 360px;
        height: 360px;
        padding: 20px 20px;
        background-color:black;
        color: white;
        font-size: 360px;
        font-weight: bold;
        text-align: center;
        line-height: 360px;
        position: absolute;
    
    }
    
    #page1{
        transform-origin:bottom;
        transition:transform 1s linear;
        
        -webkit-transform-origin: bottom;
        -webkit-transition: transform 1s linear;
        
        -moz-transform-origin:bottom;
        -moz-transition:transform 1s linear;
        
        -ms-transfrom-origin:bottom;
        -ms-transition:transform 1s linear;
    }
    #page2,#page3,#page4,#page5,#page6{
        transform-origin:bottom;
        transition:transform 1s linear;
        transform:rotateX(90deg);
        
        -webkit-transform-origin: bottom;
        -webkit-transition: transform 1s linear;
        -webkit-transform: rotateX(90deg);
        
        -moz-transform-origin:bottom;
        -moz-transition:transform 1s linear;
        -moz-transform: rotateX(90deg);
        
        -ms-transform-origin:bottom;
        -ms-transition:transform 1s linear;
        -ms-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.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 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 id="op">
        <a href="javascript:next()">next</a>&nbsp;
        <a href="javascript:prev()">previous</a>
    </div>
</body>
</html>

高版本ie和firefox都不好使，只有chrome好用，哪位大侠帮我解释下？

写回答关注