立方體沒有立體效果，求解
最開始是這樣：
當旋轉(zhuǎn)之后就完全沒有立體感了：
代碼如下，一直找不到原因，哪位朋友幫忙分析一下，謝謝
<!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>
