如果转载本文,请注明出处!
这篇文章的地址是:
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布局模式类似。