语法:
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 。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
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+ |