最近开始折腾一些CSS3的东西，发现以前走马观花看过的CSS 3D相关的属性几乎忘记的差不多了，今天就来通过一个小立方体的效果来温习下：
首先，我们来实现HTML布局，用一个div#arana作为“展台元素”，存放整个立方体容器div#box，div#box里面有6个子节点div.face，代表这个立方体的6个面。
<div id="arena">
<div id="box">
<div class="face">1</div>
<div class="face">2</div>
<div class="face">3</div>
<div class="face">4</div>
<div class="face">5</div>
<div class="face">6</div>
</div>
</div>
最外层的div#arena的作用类似于一个“展台”，我们可以想象，在“展台”上，我们需要拜访一台摄像机，来拍摄这个立方体。那么，这个摄像机，我们称之为“视点”，视点和立方体的距离，就是div#arana的-webkit-perspective属性值， 它和我们在画画的时候“透视点”的概念有点像，只不过，“透视点”在屏幕的后方，而“视点”在屏幕的前方。在立方体旋转，偏移的时候，我们还需要知道一个“基点”，3D变换的元素， 都会基于这个点来变化，“基点”通过-webkit-perspective-origin属性来定义，的默认值是50% 50%，分别代表“基点”距离元素本身左边和顶部的距离。
#arena {
-webkit-perspective: 400;
-webkit-perspective-origin: 50% 50%;
}
第二个容器div#box实际上就是我们的立方体，通过-webkit–transition属性，定义了立方体在变化时候的过度动画效果。-webkit-transform-style属性用于定义3d元素的透视效果，它有2个值：其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。这个属性应该用在作为立方体的容器元素上，而不是它里面的6个作为6个面的子元素。
#box {
position: relative;
margin: 100px auto;
height: 200px;
width: 200px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
}
定义6个“面”元素共同的普通css属性，注意，这里通过position: absolute使6面的“基点”位置保持一致。
.face {
color: #FFF;
font-size: 30px;
font-weight: bold;
position: absolute;
background: rgba(50, 50, 50, 0.7);
width: 160px;
height: 160px;
padding: 20px;
border: 1px solid #333;
}
通过-webkit-transform属性分别设置六个面的偏移和旋转位置，使其刚好围成一个立方体。-webkit-transform属性有多种方法（函数），rotateX()、rotateY()、rotateZ()分别用于设置元素基于XYZ轴的旋转角度。translateX()、translateY()、translateZ()则分别用于设置元素偏离XYZ轴的距离。
.face:nth-child(1) {-webkit-transform: translateZ(100px);}
.face:nth-child(2) {-webkit-transform: rotateY(90deg) translateZ(100px);}
.face:nth-child(3) {-webkit-transform: rotateY(180deg) translateZ(100px);}
.face:nth-child(4) {-webkit-transform: rotateY(270deg) translateZ(100px);}
.face:nth-child(5) {-webkit-transform: rotateX(90deg) translateZ(100px);}
.face:nth-child(6) {-webkit-transform: rotateX(270deg) translateZ(100px);}
最后，我们通过js绑定keyup事件，来改变div#box的-webkit-transform值来达到旋转的目的。
var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e){
switch (e.keyCode) {
case 65: // left
yAngle -= 90;
break;
case 87: // up
xAngle += 90;
break;
case 68: // right
yAngle += 90;
break;
case 83: // down
xAngle -= 90;
break;
};
var box = document.getElementById('box');
box.style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
}, false);
