transform-origin 是旋转的基准点，非辅助参数；默认50% 50%按盒模型计算，未必匹配视觉中心；翻页动画需设边缘原点并配合perspective；响应式应避免固定像素值；js修改后需强制重排或同帧更新。
transform-origin 不是“辅助参数”，它是旋转发生的位置基准——改错一个像素，整个动画就偏了。
transform-origin 默认值是 50% 50%，但视觉中心常≠几何中心
元素有 padding、border、box-sizing: border-box 或被 overflow: hidden 裁剪时，浏览器按盒模型算出的 50% 50% 未必是你眼睛看到的“正中间”。比如一个带 20px 边框的 100×100 元素，实际内容区只有 60×60，但 transform-origin: 50% 50% 仍会落在 100×100 的中心（50px, 50px），导致 rotate 后像往右上角“漂”。
- 用 DevTools 的 Styles 面板悬停
rotate()，直接看生效的transform-origin值 - 临时加
outline: 1px solid red，确认元素真实边界 - 避免靠“感觉”调，先用
transform-origin: top left或transform-origin: center对比效果
翻书页/3D 旋转必须把原点移到边缘，不能只调 rotate
翻页不是“转个角度”，是绕书脊旋转。默认 transform-origin: 50% 50% 会让右页像被风吹起的纸片，而不是从右侧边缘向左掀开。
- 右页翻动：必须设
transform-origin: 100% 50%（右中点），再配rotateY(-45deg) - 左页翻动：用
transform-origin: 0 50%（左中点），再配rotateY(45deg) - 父容器必须加
perspective，否则 3D 旋转后内容会被裁掉 - 禁用
transform-origin: 300px 50%这类固定像素值——响应式下容器宽度一变，原点就错位
JS 动态改 transform-origin 时动画不触发？是因为没强制重排
浏览器把 transform-origin 当静态属性缓存，直接 el.style.transformOrigin = 'top left' 不会触发重绘，后续 rotate 仍按旧原点执行。
- 改完 origin 后立刻读一个 layout 触发属性，例如
el.offsetHeight - 或把 origin 和 transform 更新包进同一帧：
requestAnimationFrame(() => { el.style.transformOrigin = '...'; el.style.transform = '...'; }) - 更稳妥的做法：用 class 切换代替内联 style 修改，比如
el.classList.add('rotate-from-top')
最易被忽略的一点：transform-origin 只对当前元素生效，父元素设了不影响子元素；而它和 transform 必须写在同一个元素上，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
