transform-origin 应设为 center center（或50% 50%），且父容器需有 position: relative 和明确宽高，确保旋转中心落在指针几何中心即表盘轴心。
指针旋转后偏移，transform-origin 设哪？
旋转指针时，如果没调好基准点，指针会绕左上角转，看起来像“飞出去”了。关键不是先旋转再移动，而是让旋转中心落在指针根部——也就是仪表盘中心点上。transform-origin 必须设成 center center（或等价的 50% 50%），且该元素的父容器得是仪表盘外壳，有明确宽高和 position: relative。
常见错误：把指针元素直接放在 body 下，父级没定位上下文，transform-origin 的百分比就按视口算，结果错位。
- 指针元素需设
position: absolute - 父容器（仪表盘壳）必须设
position: relative+ 明确width/height -
transform-origin: center center才能让旋转锚点落在自身中心；若指针是细长矩形（如width: 4px; height: 120px;），它的中心就是几何中心，刚好对应表盘轴心
用 rotate() 动态控制角度，但数值怎么映射？
仪表盘读数通常是 0–100 或 0–180°，而 CSS rotate() 接收的是 deg 值。别手写 rotate(75deg) 硬编码，要用 CSS 自定义属性配合 JS 更新——否则没法响应数据变化。
例如，0% 对应 0°，100% 对应 180°，那实际角度 = value * 1.8。这个换算逻辑必须在 JS 里做，然后写进 style 或 CSS 变量。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：给指针元素设
style="--angle: 90"，CSS 中写transform: rotate(calc(var(--angle) * 1deg)) - 避免用
element.style.transform = `rotate(${deg}deg)`，它会覆盖其他 transform（比如后续加的 scale 或 translate） - 注意：CSS
calc()里单位要显式写，var(--angle) * 1deg合法，var(--angle)deg不合法
指针居中对不齐？检查 top/left 和 transform 的叠加关系
很多人用 top: 50%; left: 50% 再加 transform: translate(-50%, -50%) 居中，但这对指针无效——因为指针通常窄长，translate(-50%, -50%) 会把它往左上拉，反而让根部偏离圆心。
正确做法是：让指针的「根部」（即旋转中心）落在父容器中心。既然 transform-origin: center center 已设，那就该把指针的 top 和 left 设为使其中心点对准父容器中心。
- 若父容器宽高均为
200px，指针尺寸是4px × 120px，则设top: calc(50% - 60px); left: calc(50% - 2px)（即 y 偏移一半高度，x 偏移一半宽度） - 更稳的写法：用
inset: 50% 0 0 50%+transform: translate(-50%, -50%)，但前提是transform-origin仍是center center - 调试技巧：临时加
outline: 1px solid red到指针上，看红色框中心是否和表盘中心重合
IE 不支持 transform-origin: center？兼容性要兜底
IE10+ 支持 transform-origin: center center，但老项目可能还在用 IE9。这时得降级用像素值：transform-origin: 2px 60px（假设指针宽 4px、高 120px，中心即 x=2, y=60）。
不过更现实的问题是：IE 不支持 CSS 变量，所以动态旋转只能靠 JS 直接写 style.transform。这意味着你得准备两套逻辑——现代浏览器走 CSS 变量，IE 走 JS 字符串拼接。
- CSS 中可写双声明：
transform-origin: 2px 60px; transform-origin: center center，后者会覆盖前者（现代浏览器生效） - JS 中判断：
if ('CSS' in window && CSS.supports('transform-origin', 'center')) { ... }来分流 - 真正麻烦的不是旋转，是动画卡顿：IE 下
transform动画不如requestAnimationFrame+ 重排优化稳定，指针微动时容易跳帧
最易被忽略的一点：指针的 z-index 必须高于刻度盘但低于标签文字，否则旋转时会被遮挡或盖住数字；而且所有参与定位的父层都不能设 overflow: hidden，不然指针转到边缘会直接被裁掉。
