在HTML中，可以通过CSS的 transform-origin 属性来设置元素进行变形（如旋转、缩放等）时的基准锚点位置。这个属性决定了变换的起点，也就是元素围绕哪个点进行旋转或缩放。语法如下：transform-origin: [x] [y] [z];x：水平方向的锚点位置，可以是百分比、像素值、关键字（如 left、center、right）。y：垂直方向的锚点位置，同样可以是百分比、像素值

`transform-origin` 是 CSS 中控制元素变形（如旋转、缩放）基准锚点的关键属性，它独立于 `transform` 声明、必须并列使用，且决定整个变换链的起始中心——从精准的左上角（`left top`）到自定义百分比（`10% 20%`）或像素坐标，不同取值直接影响渲染性能与兼容性；尤其要注意：它对平移无效、不触发重排、旧版 Safari 需 `-webkit-` 前缀，而滥用像素值原点还会显著增加 GPU 计算负担，掌握其语法逻辑、常见误区与性能优化技巧，是实现流畅、可控 CSS 动画不可或缺的一课。

transform-origin 必须和 transform 并列写，不能塞进函数里

很多人写成 transform: rotate(45deg) transform-origin: right top;，这完全无效——transform-origin 是独立 CSS 属性，不是 rotate() 的参数。它作用于整个 transform 链（比如 rotate(30deg) scale(0.8) 共用同一个原点），所以必须单独声明：

div {
  transform: rotate(45deg) scale(1.2);
  transform-origin: right bottom;
}

只写 transform: translate(100px, 0) 时，transform-origin 完全不生效，因为平移不依赖锚点。

双值语法最常用：先 X 后 Y，关键字/百分比/像素可混用但有顺序限制

合法写法：transform-origin: left top、transform-origin: 20px 30%、transform-origin: right 10px。注意：

• left/center/right 只能用于 X 轴，top/center/bottom 只能用于 Y 轴；top left 是错的，顺序必须是 X 然后 Y
• left 等价于 0%，center 等价于 50%，但 top 不能写成 0%（语义不同，浏览器解析行为一致，但可读性差）
• 百分比是相对于元素自身宽高计算的，不是父容器；负值允许，如 -10px -10px 表示原点移出左上角外侧

老版 Safari/Chrome 还得加 -webkit- 前缀

现代 Chrome/Firefox/Edge 已支持无前缀 transform-origin，但以下场景仍需显式加前缀：

• iOS Safari ≤ 15.6（2023 年及更早版本）会直接忽略无前缀写法
• macOS Safari 13–14（2020–2021 年）必须加 -webkit-transform-origin
• 部分旧版 Android WebView 同样不认无前缀

正确写法是并列声明：

div {
  transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
}

别用 JS 属性名 WebkitTransformOrigin 替代 CSS 规则——那只是 DOM 接口，仅限动态设置时用。

性能敏感场景下慎用非默认原点 + 像素值

transform-origin 默认值 50% 50% 由 GPU 高效处理；一旦改成 20px 30px 这类绝对单位，GPU 需额外做「平移→变换→反平移」三步矩阵运算，计算量翻倍。Mars 性能文档明确指出：非百分比原点会显著增加合成阶段负担。

优化建议：

• 优先用 10% 15% 代替 20px 30px（假设元素宽高固定）
• 需要动态改锚点时，用嵌套元素模拟：外层 rotate()，内层 translate(-50%, -50%)，避免直接改 transform-origin
• 加 will-change: transform 提前告知浏览器，但别滥用——它本身有内存开销

真正容易被忽略的是：这个属性不触发重排，改了可能完全看不出变化，除非你同时用了 rotate、scale 或 skew。调试时记得检查是否漏掉了配套的 transform 函数。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《在HTML中，可以通过CSS的 transform-origin 属性来设置元素进行变形（如旋转、缩放等）时的基准锚点位置。这个属性决定了变换的起点，也就是元素围绕哪个点进行旋转或缩放。语法如下：transform-origin: [x] [y] [z];x：水平方向的锚点位置，可以是百分比、像素值、关键字（如 left、center、right）。y：垂直方向的锚点位置，同样可以是百分比、像素值、关键字（如 top、center、bottom）。z：可选，用于3D变换中的深度方向锚点，通常用像素或百分比表示。示例1. 设置中心为旋转点.transformed { transform: rotate(45deg); transform-origin: center center; }2. 以左上角为旋转点.transformed { transform: rotate(45deg); transform-origin: left top; }3. 以特定坐标为旋转点（例如左10%、上20%） .transformed { transform: rotate(45deg); transform-origin: 10% 20%; }》文章吧，也可关注golang学习网公众号了解相关技术文章。