transform
- 版本：CSS3
- 2015.8.11
语法：
transform：none | <transform-function>+
transform-function list:
matrix() = matrix(<number>[,<number>]{5,5})
matrix3d() = matrix3d(<number>[,<number>]{15,15})
translate() = translate(<translation-value>[,<translation-value>]?)
translate3d() = translate3d(<translation-value>,<translation-value>,<length>)
translatex() = translatex(<translation-value>)
translatey() = translatey(<translation-value>)
translatez() = translatez(<length>)
rotate() = rotate(<angle>)
rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)
rotatex() = rotatex(<angle>)
rotatey() = rotatey(<angle>)
rotatez() = rotatez(<angle>)
scale() = scale(<number>[,<number>]?)
scale3d() = scale3d(<number>,<number>,<number>)
scalex() = scalex(<number>)
scaley() = scaley(<number>)
scalez() = scalez(<number>)
skew() = skew(<angle>[,<angle>]?)
skewx() = skewx(<angle>)
skewy() = skewy(<angle>)
perspective() = perspective(<length>)
<translation-value> = <length> | <percentage>
默认值：none
适用于：所有块级元素及某些内联元素
继承性：无
动画性：是
计算值：指定值，但相对长度会转换为绝对长度
媒体：视觉
取值：
- none：
- 无转换
2D Transform Functions：
- matrix()：
- 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
- translate()：
- 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
- translatex()：
- 指定对象X轴（水平方向）的平移
- translatey()：
- 指定对象Y轴（垂直方向）的平移
- rotate()：
- 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
- scale()：
- 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
- scalex()：
- 指定对象X轴的（水平方向）缩放
- scaley()：
- 指定对象Y轴的（垂直方向）缩放
- skew()：
- 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
- skewx()：
- 指定对象X轴的（水平方向）扭曲
- skewy()：
- 指定对象Y轴的（垂直方向）扭曲
3D Transform Functions：
- matrix3d()：
- 以一个4x4矩阵的形式指定一个3D变换
- translate3d()：
- 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
- translatez()：
- 指定对象Z轴的平移
- rotate3d()：
- 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
- rotatex()：
- 指定对象在x轴上的旋转角度
- rotatey()：
- 指定对象在y轴上的旋转角度
- rotatez()：
- 指定对象在z轴上的旋转角度
- scale3d()：
- 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
- scalez()：
- 指定对象的z轴缩放
- perspective()：
- 指定透视距离
说明：
- 对应的脚本特性为transform。
兼容性：
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-35.0-webkit- | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-4.4.4-webkit- | 18.0-34.0-webkit- |
| 9.0-ms- | 3.5-15.0-moz- | 36.0+ | 9.0+ | 23.0+ | 9.0+ | 40.0+ | 35.0+ | |
| 10.0+ | 16.0+ |