CSS3 transform-origin 属性
说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法:
transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
默认值:50% 50%,效果等同于center center
适用于:所有块级元素及某些内联元素
继承性:无
取值:
- <percentage>:
- 用百分比指定坐标值。可以为负值。
- <length>:
- 用长度值指定坐标值。可以为负值。
- left:
- 指定原点的横坐标为left
- center①:
- 指定原点的横坐标为center
- right:
- 指定原点的横坐标为right
- top:
- 指定原点的纵坐标为top
- center②:
- 指定原点的纵坐标为center
- bottom:
- 指定原点的纵坐标为bottom
说明:
设置或检索对象以某个原点进行转换。
- 该属性提供2个参数值。
- 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
- 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
- 对应的脚本特性为transformOrigin。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 墨绿 = 部分支持
- 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
版本 | 6-8 | 4-18 | 5.1.7 | 13-23 | 11.5-12.5 |
版本 | 9-10 |