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

对于看不到chromaum里看不到3d效果的解决办法

<!DOCTYPE html>
<head>
    <title>test</title>
    <style>
        #pagegroup{
            -webkit-perspective:1400px;
            -webkit-perspective-origin:50% 100%;

            width: 400px;
            height: 400px;
            margin: 0 auto;

            -webkit-transform-style: preserve-3d;
            position: relative;
        }
        .page{
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: #000;
            color: #fff;

            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;
        }
        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform-origin:bottom;
            -webkit-transition:-webkit-transform 1s linear;
            -webkit-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)";

            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="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 id="op">
    <a href="javascript:next()">next</a>
    <a href="javascript:prev()">previous</a>
</div>
</body>
</html>

看代码可以看到去除了my3dspace的div层，并把该div层的css属性放到pagegroup里，同时删除overflow：hidden，以及把-webkit-perspective-origin:50% 50%;改为-webkit-perspective-origin:50% 100%;你们可以自己看下改和不改的结果区别。当时照着视频上的做一直都没有3d效果，就在网上查资料，找到的最大可能就是

-webkit-perspective:1400px;

-webkit-perspective-origin:50% 100%;

-webkit-transform-style: preserve-3d;

这三条css最好放在同一个div里面。
就这个代码我在自己的chromium里已经调试成功了。