transform-origin 决定缩放旋转基点，transition 仅控制变化过程；必须在常态样式中预先设定 transform-origin，与 transform 初始值共存，且所有变换需合并写入单条 transform 声明。
过渡（transition）本身不直接控制缩放或旋转的基点，它只负责“属性变化过程”的平滑呈现；真正决定缩放、旋转从哪里开始的，是 transform-origin。两者配合的关键在于：先用 transform-origin 固定支点，再用 transform（含 scale() 或 rotate()）触发变化，最后靠 transition 让这个变化动起来。
必须把 transform-origin 写在常态选择器里
它不是动画中的“变量”，而是元素变换的静态锚点，应和 transform 初始值一起定义在基础样式中，否则 hover 或动画过程中修改它，会引发视觉跳变：
- ✅ 正确写法：元素默认就锚定左上角，hover 时绕该点放大
.btn {
transform-origin: 0 0;
transform: scale(1);
transition: transform 0.2s ease-out;
}
.btn:hover {
transform: scale(1.15);
}
- ❌ 错误写法：hover 里才设 origin —— 浏览器会先按默认 center 缩放一帧，再切到 0 0，造成抖动
缩放方向由 transform-origin + scale 方向共同决定
想实现“从左向右展开”“从上向下铺开”这类定向动画，不能只靠 scaleX 或 scaleY，必须配对设置原点：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
transform-origin: left center+scaleX(0) → scaleX(1)→ 左侧固定、向右伸展 -
transform-origin: top center+scaleY(0) → scaleY(1)→ 顶部固定、向下展开 -
transform-origin: bottom right+scale(0) → scale(1)→ 右下角原地放大
旋转动画中 origin 错位会导致“飞走”，过渡无法掩盖
比如一个绝对定位的提示框：top: -10px; left: 50%，再加 rotate(10deg)。若没设 transform-origin，它会绕自身中心转，结果整个框视觉偏移——因为旋转后中心还在原位，但边缘已甩出去。
- 要让它“绕顶部中心转”，就写
transform-origin: 50% 0 - 要让它“绕左上角转”，就写
transform-origin: 0 0 - 过渡只需管
transform的变化，origin 必须提前锁定
合并写法更安全，避免 origin 被覆盖
当同时使用 translate、scale、rotate 时，所有变换必须写在同一个 transform 声明里，否则后写的会完全替换前面的（包括 origin 效果）：
- ✅
transform: translate(-50%, -50%) rotate(45deg) scale(1.1) - ❌ 拆成多条声明，如
transform: translate(-50%, -50%)和transform: rotate(45deg)—— 第二条会丢掉位移
