为了账号安全,请及时绑定邮箱和手机立即绑定
关注
慕雪8309092

大神们,为什么我的代码一点一点写出来,在谷歌浏览器是这样的啊??

大神们,为什么我的代码一点一点写出来,在谷歌浏览器是这样的啊??http://img3.sycdn.imooc.com/5dae70f80001953019201048.jpg

2019-10-22 源自:CSS3 3D 特效 3-4 333 浏览 2 回答

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 3D</title>
    <style>
        #my3dspace{
            -webkit-perspective:800;
            -moz-perspective:800;
            -ms-perspective:800;
            -o-perspective:800;
            perspective:800;
            -webkit-perspective-origin:50% 50%;
            -moz-perspective-origin:50% 50%;
            -ms-perspective-origin:50% 50%;
            -o-perspective-origin:50% 50%;
            perspective-origin:50% 50%;
            overflow: hidden;
        }
        #pagegroup{
            width:400px;
            height:400px;
            margin:0 auto;
            -webkit-transform:-webkit-preserve-3d;
            -moz-transform:-moz-preserve-3d;
            -ms-transform:-ms-preserve-3d;
            -o-transform:-o-preserve-3d;
            transform: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;
            -moz-transform-origin:bottom;
            -ms-transform-origin:bottom;
            -o-transform-origin:bottom;
            transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
            -moz-transition:-moz-transform 1s linear;
            -ms-transition:-ms-transform 1s linear;
            -o-transition:-o-transform 1s linear;
            transition:transform 1s linear;
        }
        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform-origin:bottom;
            -moz-transform-origin:bottom;
            -ms-transform-origin:bottom;
            -o-transform-origin:bottom;
            transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
            -moz-transition:-moz-transform 1s linear;
            -ms-transition:-ms-transform 1s linear;
            -o-transition:-o-transform 1s linear;
            transition:transform 1s linear;
            -webkit-transform:rotateX(90deg);
            -moz-transform:rotateX(90deg);
            -ms-transform:rotateX(90deg);
            -o-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.msTransform="rotateX(-90deg)";
            curPage.style.oTransform="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.msitTransform="rotateX(0deg)";
            nextPage.style.oTransform="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.msTransform="rotateX(90deg)";
            curPage.style.oTransform="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.msitTransform="rotateX(0deg)";
            prevPage.style.oTransform="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>&nbsp;<a href="javascript:prev()">previous</a>
    </div>
</body>
</html>

2019-10-22
0

火狐和edge浏览器3d效果没有谷歌和360好。但是,谷歌和360出现了如截图的问题。请问应该怎么办??

我尝试过加z-index,但是还是兼容性不好。容易出问题。



哟没有哪个大神来指导指导?

2019-10-22
0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信