简体中文
简体中文
# transform
CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
# uni-app x 兼容性
| Android | iOS | web |
|---|---|---|
| 3.9 | 4.11 | 4.0 |
# 语法
transform: none | <transform-list>;
# transform 的属性值
rotate(\<angle>)
旋转元素以给定的角度（angle）
rotateX(\<angle>)
绕 X 轴旋转元素以给定的角度（angle）
rotateY(\<angle>)
绕 Y 轴旋转元素以给定的角度（angle）
rotateZ(\<angle>)
绕 Z 轴旋转元素以给定的角度（angle）
scale(\<number> \<number>)
缩放元素的尺寸，水平和垂直方向分别使用给定的比例（number）
scaleX(\<number>)
水平方向缩放元素的尺寸，使用给定的比例（number）
scaleY(\<number>)
垂直方向缩放元素的尺寸，使用给定的比例（number）
translate(\<length/percentage> \<length/percentage>)
沿 X 和 Y 轴移动元素，水平和垂直方向分别使用给定的距离或百分比
translateX(\<length/percentage>)
沿 X 轴移动元素，使用给定的距离或百分比
translateY(\<length/percentage>)
沿 Y 轴移动元素，使用给定的距离或百分比
注意事项：iOS 平台设置了rotateX(<angle>)、rotateY(<angle>)、rotateZ(<angle>)的组件视图是在三维空间中的旋转具有穿透效果，会被同一层级中其他组件视图遮盖住穿透的部分，如果不想被遮盖同层级中请不要存在其他组件。
# 兼容性
# transform 的属性值兼容性
| Android | iOS | web | |
|---|---|---|---|
| rotate(<angle>) | 3.9 | 4.11 | 4.0 |
| rotateX(<angle>) | 3.9 | 4.11 | 4.0 |
| rotateY(<angle>) | 3.9 | 4.11 | 4.0 |
| rotateZ(<angle>) | 3.9 | 4.11 | 4.0 |
| scale(<number> <number>) | 3.9 | 4.11 | 4.0 |
| scaleX(<number>) | 3.9 | 4.11 | 4.0 |
| scaleY(<number>) | 3.9 | 4.11 | 4.0 |
| translate(<length/percentage> <length/percentage>) | 3.9 | 4.11 | 4.0 |
| translateX(<length/percentage>) | 3.9 | 4.11 | 4.0 |
| translateY(<length/percentage>) | 3.9 | 4.11 | 4.0 |
# 浏览器兼容性
| Chrome | Edge | Firefox | Opera | Safari | IE | |
|---|---|---|---|---|---|---|
| transform | √（ 36 ） | √（ 12 ） | √（ 16 ） | √（ 23 ） | √（ 9 ） | √（ 10 ） |
