变换原点属性

最后更新：2026-09-13

transform-origin 变换原点属性

transform-origin 用于设置元素变换的基准点（原点）位置。默认是元素的中心点（50% 50%），旋转、缩放等变换都围绕该点进行。通过调整原点位置，可以创造出截然不同的变换效果，例如绕着边缘旋转、从角落缩放等。

分类
初始值	50% 50% 0
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

transform-origin: [<length> | <percentage> | left | center | right] [<length> | <percentage> | top | center | bottom] [<length>];

⚙️ 取值

值	类型	描述
`<length> \| <percentage>`	类型	变换原点坐标
`left \| center \| right \| top \| bottom`	关键字	预定义位置

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
transform-origin	✓ v36	✓ v12	✓ v16	✓ v9	✓ v23
所有主流浏览器均支持

提示： 第三个值（Z 轴原点）只在 3D 变换中生效，通常与 perspective 配合使用；2D 变换只需前两个值。

提示： 使用关键字 left/center/right 和 top/center/bottom 更直观；需要精确控制时可使用百分比或长度值。

❓ 常见问题

Q为什么旋转时元素会「跑偏」？

A因为默认变换原点在元素的几何中心，rotate 围绕中心旋转，视觉上元素会绕中心转。想让元素绕着自身某个角或边旋转，需要把 transform-origin 设到那里，例如 transform-origin: top left; 元素就绕左上角旋转，产生「开门」「扇叶」等效果。

Qtransform-origin 会影响位移吗？

A不会。translate 是整体平移元素，与原点位置无关；原点只影响 rotate、scale、skew 这些「围绕某点进行的变换」。所以 transform: translate(30px) rotate(45deg) 中的位移结果不受 transform-origin 影响，但旋转和缩放的视觉中心会随原点改变。

Qtransform-origin 的百分比是相对于什么的？

A百分比相对于元素自身的尺寸计算。0% 0% 是左上角，50% 50% 是中心，100% 100% 是右下角，例如 transform-origin: 100% 50% 表示以右边中心为原点。也可以使用 left、center、right、top、bottom 关键字，或用 px 等长度值精确定位。

Qtransform-origin 能用于 3D 变换吗？第三个值怎么用？

A可以。前两个值定义 X/Y 平面上的原点，第三个值（长度）定义 Z 轴上的原点位置，默认是 0。例如 transform-origin: 50% 50% -20px 会把原点移动到元素后方 20px 处，让 rotateX 产生不一样的纵深效果。3D 场景还需要父元素有 perspective 才能看到。