transform-origin必须配合transform属性使用才能生效，它定义元素旋转、缩放等变形的基准点；若仅设置transform-origin而未声明transform（如rotate()），则无任何视觉效果。
transform-origin 必须配合 transform 使用，否则完全无效。它的作用不是“移动元素”，而是告诉浏览器：接下来的旋转、缩放、倾斜等变换，该绕着哪个点进行。
为什么设置了 transform-origin 却没效果？
最常见的原因是没写 transform。比如只写：div { transform-origin: top left; } —— 这行代码本身不会触发任何视觉变化。
必须搭配如 rotate()、scale() 等才生效。
- 检查是否漏写了
transform属性（哪怕只是transform: none也不行，它不触发基点计算） - 确认目标元素不是
display: inline（如span），因为默认情况下 inline 元素没有宽高，transform-origin的百分比值会失效；可加display: inline-block或显式设width/height - 注意父容器是否设置了
overflow: hidden，某些偏移基点（如-50% -100%）会导致变换后部分区域被裁剪，误以为“没动”
transform-origin 的参数怎么写才对？
语法是 transform-origin: x-axis y-axis [z-axis];，两个必需，第三个仅用于 3D。
- 两个值时，空格分隔，顺序固定为 X 再 Y，不能写成
top 20%（top是 Y 值，不能放前面） - 支持混合单位：比如
transform-origin: right 10px（X 用方位词，Y 用像素） - 单个值时，默认第二个是
center，例如transform-origin: left等价于left center -
z-axis只接受长度单位（px、em等），不能用百分比或方位词
不同取值对旋转效果的影响
以 rotate(45deg) 为例，基点位置直接决定“甩出去”的方向和范围：
-
transform-origin: 50% 50%（默认）→ 绕中心转，最稳，但常显得“没动感” -
transform-origin: right top→ 元素右上角固定，其余部分向左下甩出，适合菜单展开动画 -
transform-origin: 0 0→ 左上角为原点，类似传统 Canvas 绘图习惯 -
transform-origin: -20px -20px→ 基点落在元素左上方外部，旋转幅度更大，容易超出视口
注意：负值和超大百分比（如 150%）是合法的，但需配合 overflow: visible 或父容器留白，否则会被截断。
兼容性和 JS 动态设置要注意什么？
现代浏览器都支持标准 transform-origin，但旧版 IE 需要前缀：
- IE9 用
-ms-transform-origin - Safari/Chrome 旧版可能需要
-webkit-transform-origin
JS 设置时必须用驼峰写法：el.style.transformOrigin = "right bottom";
别写成 transform-origin（连字符在 JS 中非法）。
动态修改时，如果元素正在做 CSS transition，transform-origin 本身不支持过渡动画（浏览器会突变），所以不要把它放在 transition 列表里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
