css transform-origin属性怎么用？一文搞懂元素变换基点设置

来源：安卓APP网作者：天穹小白头衔：草根站长

导读：本期聚焦于小伙伴创作的《css transform-origin属性怎么用？一文搞懂元素变换基点设置》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《css transform-origin属性怎么用？一文搞懂元素变换基点设置》有用，将其分享出去将是对创作者最好的鼓励。

在css中，transform-origin用来指定元素进行transform变换时的基准点。无论是旋转、缩放还是倾斜，实际都是围绕这个点发生的。理解并正确使用该属性，能让你精准控制动画和布局效果。

一、transform-origin基本语法

该属性接受一到三个值，分别对应横坐标、纵坐标，以及可选的第三维坐标（用于3D变换）。常见写法如下：

/* 默认值，元素中心 */
transform-origin: 50% 50%;

/* 使用关键字 */
transform-origin: left top;

/* 使用具体长度 */
transform-origin: 10px 20px;

/* 3D变换时的z轴 */
transform-origin: center center 30px;

二、取值类型说明

横坐标和纵坐标可以使用下面三类值：

百分比：相对于元素自身宽高，如0%表示左边缘或上边缘。
长度单位：如px、em，从元素左上角开始计算。
关键字：left、right、top、bottom、center。

不同写法对照表

写法	横坐标含义	纵坐标含义
left top	左边缘	上边缘
right bottom	右边缘	下边缘
center	水平居中	垂直居中

三、实际使用例子

下面例子让一个方块以左上角为基点旋转45度：

<div class="box"></div>
<style>
.box {
  width: 100px;
  height: 100px;
  background: #3498db;
  transform-origin: left top;
  transform: rotate(45deg);
}
</style>

如果去掉transform-origin，方块会绕中心旋转，视觉位置差别很大。

四、常见注意点

transform-origin只影响transform系列属性，不改变元素在正常文档流中的占位。

在做卡片翻转或时钟指针时，通常把基点设在边缘，例如时钟指针用transform-origin: bottom center就能绕底部转。掌握这个属性后，css动画会可控很多。

css transform-origin 元素变换修改时间：2026-07-27 23:54:16

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。