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

第六面始终是凹下去的，且初始化在最前面，哪位大神看看？谢谢

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>正方体</title>
    <script type="text/javascript">
            function rotate(){
                var x = document.getElementById("rotateX").value;
                var y = document.getElementById("rotateY").value;
                var z = document.getElementById("rotateZ").value;
                document.getElementById("cube").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

                document.getElementById("x-span").innerText = x;
                document.getElementById("y-span").innerText = y;
                document.getElementById("z-span").innerText = z;
            }
    </script>
    <style type="text/css">
        html, body, div, span,
                h1, h2, h3, h4, h5, h6, p
                a, img, ol, ul, li
                {
                    margin:0;padding:0;border:0;outline:0;
                }
                
        #cubezone{
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;
            perspective: 800;
            perspective-origin: 50% 50%;
        }

        #cube{
            position: relative;
            margin: 100px auto;
            width: 180px;
            height: 180px;
            
            -webkit-transform-style: preserve-3d;

        }

        .face{
            position: absolute;
            height: 160px;
            width: 160px;
            padding: 10px;
            background-color: green;

            font-size: 160px;
            line-height:160px;
            color: white;
            text-align: center;

            -webkit-transition: -webkit-transform .5s linear;
        }

        #face1{
            background-color: #33CCCC;
            -webkit-transform: rotate(0);
        }

        #face2{
            background-color: #00FF00;
            -webkit-transform-origin: right;
            -webkit-transform: rotateY(-90deg);
        }

        #face3{
            background-color: #009966;
            -webkit-transform-origin: left;
            -webkit-transform: rotateY(90deg);
        }

        #face4{
            background-color: #0000ff;
            -webkit-transform-origin: top;
            -webkit-transform: rotateX(-90deg);
        }

        #face5{
            background-color: #00cc00;
            -webkit-transform-origin: bottom;
            -webkit-transform: rotateX(90deg);
        }

        #face6{
            background-color: #0099cc;
            
            -wekkit-transform: translateZ(-180px);
        }

        #control{
                    margin: 0 auto;
                    font-size: 15px;
                    width: 800px;
                    font-weight: normal;
                    font-family: Arial;
                }

        #control .rangectl{
            width:700px;
        }
    </style>
</head>
<body>

<div id="cubezone">
<div id="cube">
    <div id="face1">1</div>
    <div id="face2">2</div>
    <div id="face3">3</div>
    <div id="face4">4</div>
    <div id="face5">5</div>
    <div id="face6">6</div>
</div>
</div>
<div id="control">
    <label for="rotateX">Rotate X:&nbsp;<span id="x-span">0</span>&nbsp;deg</label><br/>
    -360 <input type="range" name="rotateX" id="rotateX" value="0" min="-360" max="360" onchange="rotate()"> 360 <br/>
    
    <label for="rotateY">Rotate Y:&nbsp;<span id="y-span">0</span>&nbsp;deg</label><br/>
    -360 <input type="range" name="rotateY" id="rotateY" value="0" min="-360" max="360" onchange="rotate()"> 360 <br/>
    
    <label for="rotateZ">Rotate Z:&nbsp;<span id="z-span">0</span>&nbsp;deg</label><br/>
    -360 <input type="range" name="rotateZ" id="rotateZ" value="0" min="-360" max="360" onchange="rotate()"> 360 <br/>
</div>
</body>
</html>