CSS 变换

WebKit 现在通过 CSS 对指定变换有了基本支持。盒子可以进行缩放、旋转、倾斜和平移。当前的夜间构建版本支持仿射变换。

可以使用 -webkit-transform 属性来指定变换。它支持一个函数列表，其中每个函数都代表要应用的变换操作。您可以将多个操作链接在一起，一次性对一个对象应用多个变换（例如，如果您想同时缩放和旋转一个盒子）。支持的基本变换包括：

scale, scaleX, scaleY – 围绕变换原点缩放对象。这些函数接受一个数字作为参数。该数字可以是负数（如果您想翻转对象）。
rotate – 围绕变换原点旋转对象。此函数接受一个 CSS 角度值（例如，度或弧度单位）。
translate, translateX, translateY – 平移对象。这些函数接受长度或百分比作为参数。百分比是相对于对象的边框盒计算的。
skew, skewX, skewY – 倾斜对象。这些函数接受 CSS 角度值。
matrix – 指定一个完整的仿射变换矩阵。此函数接受六个值。最后两个值是 tx 和 ty，它们可以是长度或百分比。

除了 -webkit-transform 属性，我们还引入了 -webkit-transform-origin 属性，允许您指定变换的原点。它的语法与 background-position 相同，默认为对象的中心（因此缩放和旋转默认会围绕边框盒的中心进行）。

目前，变换不影响布局，因此在这方面它们类似于相对定位。我们正在探索如何以影响布局的方式进行变换的思路。