3D变换函数

3D transform函数

作为一个web设计师，你应该已经对在二维空间中的设计开发工作轻车熟路了，通过X轴和Y轴在水平和垂直方向定位。现在通过perspective初始化一个3D空间，我们可以在第三个空间维度，即Z轴上变换元素。

3D变换使用与2D变换相同的一些transform属性来实现。如果你很熟悉2D变换，那么你会发现，3D transform 函数与他们非常相似。

• rotateX( angle )

• rotateY( angle )

• rotateZ( angle )

• translateZ( tz )

• scaleZ( sz )

我们知道translateX()是沿着水平方向X轴来设置元素的，而translateZ()是沿着Z轴来设置元素的，也就是对3D空间内从前到后的景深设置。如果值为正，那么意味着元素离观看者近，值为负意味着离观看者远。

ratate函数会将元素绕着相应的轴进行旋转。这样理解可能不太直观，你可能认为ratateX()是将一个物体水平向左或者向右进行旋转。然而，ratateX()是将元素绕着X轴进行旋转，所以如果元素的顶部向后、向远处倾斜，那么它的底部将会向离我们近的方向倾斜。

同样有一些简写方法去同时设置三个维度的值：

• translate3d( tx, ty, tz )

• scale3d( sx, sy, sz )

• rotate3d( rx, ry, rz, angle )

硬件加速

这些三个参数的transform3d()函数也可以很好的触发硬件加速。CSS 3D变换规范的作者和WebKit的主要参与者，Dean Jackson说过：

实质上，任何包含3D操作的变换函数都会触发硬件组合，甚至只是做2D变换，或者什么都不做（比如translate3d(0,0,0)）。注意这只是现行写法，这很有可能在未来出现变化（这也是为什么我们不去收录和鼓励的的原因）。但是这确实在某些场景下很有帮助，并且可以大幅提高重渲染性能。

这是2010年的一段文字，自此，浏览器纷纷采纳接受这种写法，但见仁见智，浏览器中的硬件加速仍然是一个很少被官方文档提及的神秘主题。

为了明确，本手册中的例子都使用基本的transform函数，但是如果你寻求更高的性能，那么可以尝试使用transform3d()。