简体中文
简体中文
# transform-origin
transform-origin CSS 属性让你更改一个元素变形的原点。
# uni-app x 兼容性
| Android | iOS | web |
|---|---|---|
| 3.9 | 4.11 | 4.0 |
# 语法
transform-origin: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?;
# transform-origin 的属性值
top
相对于元素的顶部边缘进行变形
left
相对于元素的左侧边缘进行变形
right
相对于元素的右侧边缘进行变形
bottom
相对于元素的底部边缘进行变形
center
相对于元素的中心点进行变形
# 默认值
| 平台 | 默认值 |
|---|---|
| uvue-app | 50% 50% |
| uvue-web | 50% 50% 0 |
注意：W3C 默认值为：50% 50% 0
# 兼容性
# transform-origin 的属性值兼容性
| Android | iOS | web | |
|---|---|---|---|
| top | 3.9 | 4.11 | 4.0 |
| left | 3.9 | 4.11 | 4.0 |
| right | 3.9 | 4.11 | 4.0 |
| bottom | 3.9 | 4.11 | 4.0 |
| center | 3.9 | 4.11 | 4.0 |
# 浏览器兼容性
| Chrome | Edge | Firefox | Opera | Safari | IE | |
|---|---|---|---|---|---|---|
| transform-origin | √（ 36 ） | √（ 12 ） | √（ 16 ） | √（ 23 ） | √（ 9 ） | √（ 10 ） |
