3D变换函数
最后更新于
这有帮助吗？
作为一个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()。