transform

语法：

transform：none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)?

默认值：none

取值：

none：
无转换
matrix(<number>,<number>,<number>,<number>,<number>,<number>)：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])：
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX(<length>)：
指定对象X轴（水平方向）的平移
translateY(<length>)：
指定对象Y轴（垂直方向）的平移
rotate(<angle>)：
指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale(<number>[, <number>])：
指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)：
指定对象X轴的（水平方向）缩放
scaleY(<number>)：
指定对象Y轴的（垂直方向）缩放
skew(<angle> [, <angle>])：
指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>)：
指定对象X轴的（水平方向）扭曲
skewY(<angle>)：
指定对象Y轴的（垂直方向）扭曲

说明：

设置或检索对象的转换。
  • 对应的脚本特性为transform。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-8.0 4.0-9.0 5.1 13.0-16.0 11.50-11.60
版本 9.0-10.0

写法：

内核类型 写法
Webkit(Chrome/Safari) -webkit-transform
Gecko(Firefox) -moz-transform
Presto(Opera) -o-transform
Trident(IE) -ms-transform
W3C transform

示例：