<CSS Transforms>译文

如果转载本文，请注明出处！

这篇文章的地址是： https://www.webkit.org/blog/130/css-transforms。写于2007年10月26日。

webkit的最新版本已经初步支持了2d转换，方法是通过css设置2d参数。目前支持对box进行伸缩、旋转、倾斜、平移操作。

设置2d参数的css属性名称是“-webkit-transform”，这个属性可以识别一系列的函数。每一个函数都对应一个基本2d转换行为。如果将多个函数作为-webkit-transform的值，那么就可以对同一个DOM节点实施多个2d变换。基本2d转换函数（行为）包括：

• scale, scaleX, scaleY -- 以转换中心作为原点，做伸缩操作。这些函数需要接收一个数值类型参数，参数可以是负值。
• rotate -- 以转换中心作为原点，做旋转操作。这个函数接收css角度类型参数。可以使用度来做单位，也可以使用弧度做单位。
• translate, translateX, translateY -- 平移DOM节点。这些函数需要接收一个长度或者百分数作为参数。如果参数是百分数，那么基准是边框边界。
• skew, skewX, skewY -- 裁剪DOM节点。这些函数接收一个css角度类型参数。
• matrix -- 进行复杂仿射变换。这个函数接收6个参数，表示一个仿射变换矩阵。最后两个参数表示偏移tx, ty，可以是长度类型或者百分数。

除了-webkit-transform参数之外，webkit最新版本还有一个与2d转换有关的属性“-webkit-transform-origin”。webkit-transform-origin用于设置转换中心。webkit-transform-origin的默认值是DOM节点的中心。

目前2d转换不会影响布局。从这个方面来说，2d转换与realtive布局模式类似。