CSS3 transform 属性
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法：
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 |