Css3中transform主要有rotate、scale、skew、translate四个属性。我们在这里并不会详细介绍他们中的每个特性，因为很多文档或者chm文件都可以查阅相关资料。这篇文章主要讲述的是这些属性分别在普通2d环境与3d透视情况下的表现和差异。接下来，我们就结合demo逐个说明：

rotate

其实rotate可以有多种设置形式，大体分为rotate(xdeg)，rotateX(xdeg)，rotateY(ydeg)，rotateZ(zdeg)。当然在3d的情况，你也可以使用rotate3d(0,0,1,zdeg)来代替rotateZ(zdeg)。好吧！首先，我们先来看demo，再去分析它们的表现。

查看 rotate demo

通过查看demo，我们可以得知3d透视对于rotate(xdeg)和rotateZ(zdeg)没有什么影响，正值顺时针旋转，负值逆时针旋转。

而rotateX(xdeg)和rotateY(ydeg)则在普通2d环境与3d透视下表现出差异，如我们所知，rotateX是围绕x轴旋转，rotateY是围绕y轴旋转。在2d环境下，rotateX和rotateY作用的效果分别是在高度和宽度减小。

而在3d透视中，rotateX表现为当旋转度数为正时元素顶部向屏幕里面旋转，底部向屏幕外面旋转，旋转度数为负时则情况相反。对于rotateY，旋转度数为正时元素左边向屏幕外旋转，右边向屏幕里面旋转，负度数也是表现为相反。

scale

scale的功能是对元素进行缩放，我们通过demo中的对比，发现scale属性在2d与3d环境下无表现差异。

查看 scale demo

skew

skew 属性主要是对元素进行倾斜，skewX是以X轴倾斜，skewY是以Y轴倾斜，与scale一样，在2d与3d透视环境中，skew也是表现一致。不过要注意，3d透视会对元素进行微量模糊。

查看 skew demo

translate

在某种程度说来，translate与rotate有点类似。rotate是根据x、y、z轴旋转，而translate则是在x、y、z轴方向移动。Translate3d(x,y,z)表示分别在x轴、y轴，z轴方向移动x、y、z单位的距离。当translate只有一个参数时，则表现为translateX，当然你也可以用translate3d(x,0,0)代替之。而且要注意，z的值不能为百分比。

同样，我们还是先来看demo。查看 translate demo

分析demo，我们发现translateX和translateY不受不同环境的影响。而translateZ在普通的2d环境没有任何效果，但在3d透视中，z为正数表现为元素向屏幕外移动（视觉上变大），z为负数表现为向屏幕里面移动（视觉上变小）。

backface-visibility

backface-visibility有两个参数，即visible（默认参数）和hidden。当参数visible时，表示元素翻转到180deg（背面），背面可见。而参数hidden则是元素翻转到180deg，背面不可见。你可以点击它的demo看效果；

查看 backface-visibility demo

2d环境下，就是根据参数来显示或隐藏背面。而在3d透视中，当翻转涉及到多个元素，visible表现为元素多次翻转后才显示背面元素，而hidden则表现为瞬间翻转显示背面元素，好像未完成整个翻转。

perspective-origin

这个属性主要表示元素3d旋转的中心点，默认为perspective-origin: 50% 50% 。如果你要深入了解perspective-origin这个属性，可以查看文章最后的盒子demo并试着改变相应的perspective-origin。

最后，来看一个有关transform与perspective 3d 的 盒子特效。