transform-origin属性怎么用？CSS变换基点设置详解

transform-origin是CSS中用来设置元素变换基点的属性，简单来说，它决定了旋转、缩放、倾斜这些变换操作围绕哪个点发生。很多初学者在写rotate动画时会发现元素转得“歪歪扭扭”，或者卡片翻转效果不自然，十有八九都是基点位置没设置对。默认情况下，变换基点位于元素的正中心，也就是50% 50%这个位置，但实际开发中我们经常需要让元素绕着某个角、某条边甚至元素外的某个点来变换，这时候transform-origin就派上用场了。

transform-origin的基本语法与取值

transform-origin属性最多可以接收三个值，分别对应x轴、y轴和z轴的坐标。基本语法形式是transform-origin: x y z，其中x和y是必须理解的两个核心维度，z轴只在3D变换中才有意义，需要配合perspective属性使用。

x轴的取值非常灵活，可以是关键字（left、center、right）、长度值（如10px、2em）或者百分比（如30%）。y轴同理，可以取top、center、bottom这些关键字，也可以是具体的长度或百分比。需要注意百分比是相对于元素自身的宽和高来计算的，比如transform-origin: 0% 100%表示基点在元素的左下角，这个写法在做钟摆动画、开门效果时特别常用。

如果只写一个值，那么第二个值默认为center。比如transform-origin: left等价于transform-origin: left center。下面这个例子展示了不同基点设置对旋转效果的影响：

/* 基点在中心，默认效果 */
.box1 {
    transform: rotate(45deg);              /* 绕中心旋转 */
    transform-origin: center center;
}

/* 基点在左下角，模拟钟摆 */
.box2 {
    transform: rotate(45deg);              /* 绕左下角旋转 */
    transform-origin: 0% 100%;
}

/* 基点在元素外部右上方 */
.box3 {
    transform: rotate(45deg);
    transform-origin: 150% -50%;
}

三个盒子的rotate角度完全相同，但因为基点不同，最终呈现的位置差异非常大。这就是为什么看别人的旋转动画代码时，如果发现效果不一样，首先要检查的就是transform-origin的值。

基点在不同变换效果中的实际表现

旋转是最直观体现基点作用的变换。想象时钟的指针，它绕着表盘中心的轴转动，这个轴就是transform-origin。如果把指针的基点设置在中心，它会像风车一样自转；设置在底部，才会像真实指针那样绕一端摆动。

缩放效果对基点同样敏感。设置transform: scale(0.5)时，如果基点在中心，元素会向中心收缩；如果基点在左上角（即transform-origin: 0 0），元素会向左上角方向收缩，右下边缘随之移动。做地图缩放、图片放大镜效果时，理解这一点至关重要，因为用户期望的是以鼠标位置为中心缩放，这就需要用JavaScript动态计算并修改transform-origin的值。

<div class="zoom-box">
    <img src="https://ipipp.com/photo.jpg" alt="示例图片">
</div>

<style>
.zoom-box {
    width: 300px;
    height: 200px;
    overflow: hidden;
}
.zoom-box img {
    width: 100%;
    transition: transform 0.3s;
    transform-origin: 0 0;  /* 以左上角为基点，方便JS计算缩放位置 */
}
.zoom-box:hover img {
    transform: scale(1.5);
}
</style>

倾斜变换skew也受基点影响。改变基点位置后，元素被“拉伸”的方向会明显不同。至于平移translate，由于它不改变元素的形状和角度，基点位置对最终结果没有影响，这一点可以记住，避免做无用功。

3D变换中的z轴与常见实战场景

当开启3D变换后，transform-origin的第三个值z开始发挥作用。比如做卡片翻转效果时，设置transform-origin: center center -100px可以让翻转的视觉深度发生变化。不过要注意，z轴值必须是长度值，不能是百分比或关键字，而且必须配合transform-style: preserve-3d才能看到理想效果。

下面是一个完整的卡片翻转示例，这在各种官网首页的团队成员介绍、商品展示中非常常见：

<div class="card">
    <div class="card-inner">
        <div class="front">正面内容</div>
        <div class="back">背面内容</div>
    </div>
</div>

<style>
.card {
    width: 200px;
    height: 300px;
    perspective: 800px;  /* 3D透视效果 */
}
.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    transform-origin: center center;  /* 绕中心水平轴翻转 */
}
.card:hover .card-inner {
    transform: rotateY(180deg);
}
.front, .back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}
.back {
    transform: rotateY(180deg);
}
</style>

再举一个开门效果的例子。做侧边栏抽屉或者门式展开动画时，把基点设置在元素的左侧边缘，配合rotateY就能实现真实的开门视觉：`transform-origin: left center; transform: rotateY(-90deg);`。反过来，如果想让元素像书页一样从右侧翻开，改成transform-origin: right center即可。

还有一种容易被忽略的场景是文字或图标的摆动动画。加载动画中常见的摆动图标，通常写法是transform-origin: top center配合rotate正负角度来回切换，基点定在顶部，摆动起来才自然。如果基点留在默认的中心位置，摆动会显得很怪异。

最后提醒一点，transform-origin是可以参与过渡动画的属性，但直接改变基点位置往往会产生跳动，更推荐的做法是保持基点不变、只过渡transform的值。掌握好这个属性，各种旋转、翻转、缩放动画就能随心所欲地控制了。

transform-originCSS变换变形基点修改时间：2026-09-05 18:50:45