语法:
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+ |