立方体没有立体效果，求解

源自：-
立方体没有立体效果，求解

最开始是这样：
当旋转之后就完全没有立体感了：
代码如下，一直找不到原因，哪位朋友帮忙分析一下，谢谢
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

    <style type="text/css">
        #game {
          
          -webkit-perspective: 800;
          -webkit-perspective-origin: 50% 50%;  
        }

        #cube {
          position: relative;
          width: 200px;
          height: 200px;
          margin: 50px auto;
          -webkit-transform-style: -webkit-preserve-3d;preserve
        }

        .face {
          position: absolute;
          width: 160px;
          height: 160px;
          
          background-color: black;
          color: white;
          text-align: center;
          font-size: 160px;
          line-height: 160px;


          -webkit-transition: -webkit-transform 1s linear;
        }

        #face2 {
            -webkit-transform-origin:right;
            -webkit-transform: rotateY(-90deg);
        }
        #face3 {
            -webkit-transform-origin:left;
            -webkit-transform: rotateY(90deg);
        }
        #face4 {
            -webkit-transform-origin:top;
            -webkit-transform: rotateX(-90deg);
        }
        #face5 {
            -webkit-transform-origin:bottom;
            -webkit-transform: rotateX(90deg);
        }
        #face6 {
            -webkit-transform: translateZ(-200px);
        }

        #op {
          width: 800px;
          margin: 10px auto;
        }

        #op .range-control {
          width:700px;
        }
    </style>

    <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('degx-span').innerText = x;
            document.getElementById('degy-span').innerText = y;
            document.getElementById('degz-span').innerText = z;
        }
    </script>

</head>
<body>
<div id="game">
    <div id="cube">
        <div class="face" id="face1">1</div>
        <div class="face" id="face2">2</div>
        <div class="face" id="face3">3</div>
        <div class="face" id="face4">4</div>
        <div class="face" id="face5">5</div>
        <div class="face" id="face6">6</div>
    </div>
</div>
<div id="op">
        <p>rotate x: <span id="degx-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onchange="rotate()" /><br/>
        <p>rotate y: <span id="degy-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" onchange="rotate()" /><br/>
        <p>rotate z: <span id="degz-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" onchange="rotate()" /><br/>
    </div>
</body>
</html>
提问者：oneamongthosestars 2016-06-29 10:39
立方体没有立体效果，求解

个回答
