为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

正在回答

4 回答

半年了,不清楚你解决没有。
这个问题,很明显3D场景创建失败。
也就是说很大几率是敲错码了。
你的错误代码>>>>>>transform: preserve-3d;
正确属性为>>>>>>>transform-style: preserve-3d;
transform 主要用于转换效果:旋转、倾斜、缩放、移动等。
transform-style 用于定义被嵌套元素在 3D 空间中如何显示。
还是太粗心些了。

还有,你的代码太冗余,太乱,兼容写 -webkit- 就够了,-moz-, -o-, Opera、Firefox现在的版本已经兼容 -webkit- 写法了。至于 Safari 也就稍微注意下部分 -webkit- 何其他浏览器写法的不同。

也就是说,仅仅写 transform:; 和 -webkit-transform:; 这样就够了。

0 回复 有任何疑惑可以回复我~

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

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



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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信