<p>应使用--gauge-rotation变量配合transform: rotate(calc(var(--gauge-rotation) * 1deg))实现指针动态旋转，需声明transition: transform 0.4s ease-out，JS通过setProperty更新变量值并注意作用域隔离与Safari兼容性问题。</p>
用 --gauge-rotation 控制指针旋转，别硬写 transform: rotate()
CSS 变量本身不触发动画，但可以作为 transform 的计算输入源。关键不是“用变量”，而是让变量值被 @keyframes 或过渡逻辑驱动。直接在元素上写 style="--gauge-rotation: 120" 不会动，必须配合 transition 或 JS 动态更新变量值才能产生渐变效果。
- 指针元素需声明
transition: transform 0.4s ease-out（不能只写transition: --gauge-rotation——CSS 变量不可直接过渡） - 旋转逻辑写成
transform: rotate(calc(var(--gauge-rotation) * 1deg))，单位必须显式补上，calc()才能生效 - 初始值建议设为
--gauge-rotation: 0，避免首次渲染跳变 - 若刻度范围是 0–100 对应 0°–180°，记得在 JS 中做线性映射：
rotation = value * 1.8，而不是直接塞原始值
JS 更新 --gauge-rotation 时，注意触发重排的时机
频繁调用 element.style.setProperty('--gauge-rotation', val) 本身不强制重绘，但如果紧接着读取 offsetHeight 等布局属性，会强制同步计算，拖慢动画。仪表盘常需响应实时数据流，这里容易卡顿。
- 用
requestAnimationFrame批量更新变量值，避免每帧多次 setProperty - 不要在
setInterval里直接改变量——哪怕间隔 100ms，连续 5 次更新也会触发 5 次样式计算 - 如果数值变化平滑（如模拟传感器读数），优先用 CSS
@keyframes+animation驱动，JS 只负责设置终点值：el.style.setProperty('--gauge-target', '137')，再靠 CSS calc 插值 - Chrome DevTools 的 “Rendering” 面板勾选 “Paint Flashing”，可直观看到哪些帧真正在重绘
多仪表共用同一套变量时，:root 和局部作用域别混用
把 --gauge-rotation 放在 :root 下看似方便，但多个仪表会互相覆盖——后设置的值生效，前一个立刻跳转。必须隔离作用域。
- 每个仪表容器加唯一 class，比如
.gauge--cpu，变量挂在其上：.gauge--cpu { --gauge-rotation: 0; } - 指针元素用
transform: rotate(calc(var(--gauge-rotation) * 1deg))，自然继承父容器变量 - 避免用 JS 直接操作
document.documentElement.style，除非你真要全局同步所有表盘 - 若需主题切换（如深色模式旋转方向翻转），可在根节点加
data-theme="inverted"，然后用属性选择器覆盖：[data-theme="inverted"] .gauge { --gauge-rotation: calc(var(--gauge-rotation) * -1); }
IE 不支持 CSS 变量，但仪表盘通常不需要兼容
真正要命的不是 IE，而是 Safari 15.4 之前对 calc() 里嵌套 var() 的解析 bug：当 var(--x) 是负数时，calc(var(--x) * 1deg) 会报无效值。这在指针回弹或双向刻度场景下必现。
立即学习“前端免费学习笔记（深入）”；
- 绕过方式：JS 端提前判断符号，拼字符串
"rotate(" + val + "deg)"直接写进style.transform（牺牲部分可维护性，换兼容性） - 或者用
clamp()包一层：rotate(calc(clamp(-180, var(--gauge-rotation), 180) * 1deg))，Safari 15.4+ 已修复 - 移动端 iOS Safari 16.4+ 才完全稳定支持
transform中的calc(var())，上线前务必真机测 - 别信 CanIUse 上“partial support”的描述——它只标语法支持，不标 runtime 行为是否可靠
实际最难的不是怎么转，是怎么让转得准：角度映射函数是否线性、零点校准是否对齐、小数精度截断是否导致抖动。这些细节藏在 JS 计算层，CSS 变量只是最后一环的搬运工。
