transform-origin不是动画属性，只在动画开始前读取一次并固定不变；必须写在触发动画的元素自身上，不能写在@keyframes内，否则会导致跳变或无效。
transform-origin 不是动画属性，但它决定每一帧 transform 的计算基准
它只在动画开始前读取一次，之后固定不变。你在 @keyframes 里改 transform-origin，浏览器不会过渡，而是直接跳变——这常被误认为“动画没生效”，其实是写错位置了。
常见错误现象：
- 写了
animation: spin 1s，但旋转看起来偏移、抖动，实际是没设transform-origin，元素按默认中心（50% 50%）算，而视觉中心因 padding/border/content 高度不均被拉偏 - 给父容器设了
transform-origin: top left，子元素依然绕自己中心转——它必须写在触发动画的元素自身上 - SVG 中的
<path></path>没反应，是因为它默认没有布局盒子；得加transform: rotate(0)或显式设display: block才能生效
transform-origin 值怎么选：像素、百分比、关键词的区别
三者效果在静态时可能一致，但响应式或缩放场景下行为不同：
-
transform-origin: 0 0和transform-origin: top left都锚定到 border box 左上角（含 border），但前者更明确，后者语义强 -
transform-origin: 0% 0%在元素宽高变化时仍保持左上角，适合弹性布局；0px 0px在 zoom 或高 DPI 下可能失准 -
transform-origin: center bottom等价于50% 100%，但关键词组合更易读，也避免百分比在空元素中失效（比如width: 0; height: 0时50% 50%会退化）
和 scale/rotate/skew 动画搭配时的典型陷阱
只要动画里用了 transform 函数，transform-origin 就全程起作用——不是只影响 rotate()：
- 同时做
scale(2) rotate(45deg)，两个变换都绕同一个原点发生；想让缩放从左侧展开、旋转绕中心，得拆成两个元素或用嵌套 -
transform-origin: 50% 0+scaleY(0)实现顶部收起动画，但若元素有border-top，原点仍在 border 上边缘，不是 content 顶边 - 用
will-change: transform不会加速transform-origin变更，反而可能干扰渲染；它只对真正频繁变化的transform值有效
SVG 内部元素设 transform-origin 的硬性条件
SVG 原生不支持 transform-origin 直接作用于 <path></path> 或 <circle></circle>，除非满足以下任一：
- 该 SVG 子元素已设置
transform（哪怕只是transform: rotate(0)），触发其获得独立坐标系 - 包裹它的
<g></g>设了transform，且该<g></g>有明确尺寸（如width/height或viewBox） - 用 CSS 把该子元素显式设为块级：
display: block或transform: translateZ(0)
漏掉任意一条，transform-origin 就会被忽略，动画仍按 SVG 坐标系原点（左上角）执行，而不是你写的 50% 50%。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
