<3D Transforms>简译

原文地址是： https://www.webkit.org/blog/386/3d-transforms ，写于2009年7月16日。

Mac OS X平台上的webkit已经支持了3d转换。3d转换就是：通过css属性值设置DOM节点的3d坐标，最终实现一种3d立体效果。3d转换是对2d转换的一个升级。关于2d转换可以阅读文章：<2d Transforms>译文。从iphone2.0版本开始，webkit已经支持了3d转换。现在，我们很高兴的宣布： Leopard系统以及之后的版本，都支持了3d转换。如果你想要立刻体验3d转换，那么请先确认你是在Leopard平台上、使用最新版本webkit。

Poster Circle

3d转换也是通过设置"-webkit-transform"属性来进行的。例如要将DOM节点绕Y轴旋转45度，那么css代码为：-webkit-transform:rotateY(45deg);。

为了支持3d转换，新增了一些函数。如下：

• translate3d(x, y, z), translateZ(z) -- 平移DOM节点。z参数表示距离观察者的距离，不能为百分数。
• scale3d(sx, sy, sz), scaleZ(sz) -- 伸缩DOM节点。伸缩因子z也会影响子孙节点。
• rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle) -- 前两个函数绕着水平轴和垂直轴旋转DOM节点。角度的单位可以是deg，也可以是rad，还可以是grad。最后一个函数允许你绕着3D空间的任意向量做旋转，(x, y, z)就规定了3D空间中作为轴的向量。
• perspective(p) -- 这个函数允许你在一次3d转换中修改视点位置。一般情况下，css属性"--webkit-perspective"定义了视点位置。这个函数允许只针对一个DOM节点改变视点位置。
• matrix3d(...) -- 这个函数接收16个参数，表示4 x 4矩阵。16个参数是列主序矩阵。

除了-webkit-transform属性外，我们还实现了标准中规定的其他属性。其它属性的解释如下：

• -webkit-transform-origin -- 在2d转换中，-webkit-transform-origin设定二维平面的一个点(x,y)，现在它还可以设定z轴坐标。新实现的属性如下：

• -webkit-perspective -- 用于设定视点的深度。DOM节点显示出来的大小不仅仅取决于自身大小，还于DOM节点距离视点的距离有关系。可以假设视点距离为p。如果DOM节点的z坐标为0，那么DOM节点显示出来的大小就是它自身实际大小。如果DOM节点z坐标等于p/2，即DOM节点位于平面与视点中间，那么DOM节点显示出来的大小等于它自身实际大小的2倍。如果DOM节点z坐标等于-p，即平面位于DOM节点与视点中间，那么DOM节点显示出来的大小等于它自身大小的1/2。综上，-webkit-perspective的值较大，那么透视效果就较差；-webkit-perspective的值较小，那么透视效果就较明显。位于区间[500px, 1000px]的值一般可给出较好的透视效果。视点默认位置在边框边界的中点。可以通过webkit-transform-origin来改变视点的位置。下面是一个视点的例子：Perspective。-webkit-perspectives属性并不影响DOM节点，而是影响DOM节点的子孙。如果DOM节点具有perspective属性，那么该节点所有子孙的perspective值都相同。
• -webkit-transform-style -- 使用之前的属性，可以使得DOM节点具有3D效果。但是DOM节点以及它的子孙还是绘制在一个平面上的，仅仅是具有3D的视觉效果了。如果你期望使用“3D变换”多层次绘制对象，而非让所有对象处于同一平面，换句话说，你期望所有的节点共享3D空间而非共享2D平面，那么你就需要webkit-transform-styles属性了。transform-style的例子为：Transform Style。这个属性有两个可选值。flat -- 这是默认值，将所有节点绘制到一个平面。preserve-3d -- 节点与节点的子孙不在一个平面。
• -webkit-backface-visibility -- 这个属性有两个值，用于规定：当节点的正面朝后时，节点的内容的可见性。如果属性值为visible，那么节点内容可见。如果属性值为hidden，那么节点内容隐藏。例子：Morphing Power Cubes。