花了点时间把CSS3D变形研究了下，做了个立方体的实例。
1. 基础
1.1 理解坐标和旋转
参考资料：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
rotateX(angle)：定义沿X轴的3D旋转
rotateY(angle)：定义沿Y轴的3D旋转
rotateZ(angle)：定义沿Z轴的3D旋转
以上三个函数，angle为旋转角度，值为正时表示：从轴延伸方向向圆心看顺时针旋转（或者反过来理解，从圆心向轴的延伸方向看逆时针旋转），值为负值时表示：从轴延伸方向向圆心看逆时针旋转（或者反过来理解，从圆心向轴的延伸方向看顺时针旋转）。
举例来说，如上图所示，rotateX（30deg），表示绕着X轴旋转30度，那么具体是如何旋转，向哪个方向旋转呢？有个简单的方法就是：从+X向圆心看，顺时针方向旋转30度即可。
1.2 理解translateZ(z)
translateZ(z)定义3D转换，只用Z轴的值，它的功能就是让元素在自己的眼前或近或远。z值越大则子元素离的越远，z值越小则子元素离的越近。
2. 立方体实例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.cube{
width: 200px;
height: 200px;
margin: 200px;
perspective: 250px;//透视深度
-webkit-perspective: 250px;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: -100% -50%;//可以修改此处的值，理解透视点
}
.cube > div{
width: 100px;
height: 100px;
position: absolute;
border:solid 2px red;
line-height: 100px;
font-size: 70px;
text-align: center;
background-color: gold;
}
.front{
-webkit-transform: rotateX(0deg) translateZ(50px);
}
.back{
-webkit-transform: rotateX(0) translateZ(-50px);
}
.right{
-webkit-transform: rotateY(90deg) translateZ(50px);
}
.left{
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top{
-webkit-transform: rotateX(90deg) translateZ(50px);
}
.bottom{
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
</style>
<body>
<div class="cube">
<div class="front">前</div>
<div class="back">后</div>
<div class="right">右</div>
<div class="left">左</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
</body>
</html>
为了查看完整的变换过程，可以将CSS里面的 translateZ（）都给去掉，然后一个一个调试，就可以理解 translateZ具体是如何调整元素位置的。translateZ(z)，z为正值表示向正前方移动，z为负值表示向后方移动。以上面代码为例，我们看下right，首先围绕Y轴顺时针旋转90度，效果如下：
可以看到旋转90度后的效果，此时没有向正前方移动50px。注意，此处我加了背景色gold，以便清晰看的变换后的元素位置，然后我们再加上tanslateZ(50px)，效果如下：
可以看到向正前方移动50px后，正好成为了立方体的右面。left是围绕Y轴逆时针旋转90度，然后再向正前方移动50px。具体效果可自行调试。
3. 运行效果
第2节的代码运行效果如下：
至此，简单的立方体即完成了。理解坐标，旋转方向后再用代码进行一步步调试，即可理解3D变换，为进一步学习打下基础。
2862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
