CSS transform-origin 属性

CSS transform-origin 语法

在 CSS 中，transform-origin 属性用于设置元素进行 2D 或 3D 变换的原点。所谓的 “原点”，小伙伴们可以理解为 “动画或旋转的支点位置”。

语法：

transform-origin: 值;

说明：

transform-origin 的取值可以是 1 个值、2 个值或 3 个值。

当 transform-origin 取值是 1 个值时：

如果是一个数值：比如 px、em、百分比等，此时该值表示 “X 轴” 的位置，而 “Y 轴” 使用默认值 50%（即 center）。例如 transform-origin: 50%; 等价于 transform-origin: 50% 50%;。
如果是一个关键字：它会根据关键字的值来解析成 X 轴的值，还是 Y 轴的值。其中，left、right、center 用于 X 轴，然后 top、bottom、center 用于 Y 轴。例如 transform-origin: top; 等价于 transform-origin: center top;。

当 transform-origin 取值是 2 个值时：

第一个值表示 X 轴的原点：可以是一个数值，也可以是 left、center、right 等关键字。
第二个值表示 Y 轴的原点：可以是一个数值，也可以是 top、center、bottom 等关键字。

当 transform-origin 取值是 3 个值时，前两个值表示 X 轴和 Y 轴的原点。第三个值表示 Z 轴的原点。

transform-origin 取值示例
写法	说明
transform-origin: 50% 50%;	元素中心（默认值）
transform-origin: left top;	左上角
transform-origin: 100px 0%;	距离左边 100px，顶部 0%
transform-origin: center center 100px;	元素中心，Z 轴原点在 100px

此外，小伙伴们还要注意以下几点。

transform-origin 可用于所有支持 transform 的元素，例如块级元素、内联块元素等。
transform-origin 不会改变元素本身的位置或布局，只影响变换时的视觉效果（如旋转是围绕哪个点转）。
在旋转、缩放、倾斜、3D 变换等场景中，合理设置 transform-origin 能实现更自然或精准的动画效果。

CSS transform-origin 摘要

属于	CSS3 变换
使用频率	中
是否继承	是
默认值	50% 50% 0
兼容性	查看
官方文档	查看
MDN	查看

CSS transform-origin 示例

在 CSS3 变形中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于 x 轴和 y 轴的 50% 处，如下图所示（以 2D 变换为例）。

元素的中心原点

默认情况下，CSS3 的各种变换（如 CSS 平移、CSS 旋转、CSS 缩放、CSS 倾斜等）都是以元素的中心原点进行变形的。接下来，我们通过一个简单的例子来讲解一下 CSS transform-origin 属性是如何使用的。

示例：transform-origin 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 设置原始元素样式 */
        #origin {
            width: 200px;
            height: 100px;
            border: 1px dashed gray;
            margin: 100px
        }
        /* 设置当前元素样式 */
        #current {
            width: 200px;
            height: 100px;
            background-color: lightskyblue;
            transform-origin: right center;
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

页面效果如下图所示。

transform-origin 示例

分析：

这里使用 transform-origin: right center; 使得变形的中心原点由 “正中” 变为 “靠右居中”。因此元素的旋转是围绕 “新中心原点” 作为旋转的中心原点的。