transform
- 版本:CSS3
- 继承性:无
语法:
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。
兼容性:
- = 支持
- = 不支持
- = 部分支持
- = 实验性质
支持版本\类型 | |||||
---|---|---|---|---|---|
版本 | 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 |