                        課程
                    
                        /前端開發(fā)
                        
                            /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>