CSS变量不能直接用于rotate()函数，因缺乏类型定义导致浏览器忽略或失效；需用@property声明angle类型或calc(var(--deg)*1deg)兜底，JS直接设置style.transform最可靠。
transform里直接写rotate(var(--deg))为什么不动
浏览器根本不解析这种写法——rotate()函数的参数不是独立数值上下文，CSS变量var(--deg)无法被当作角度值参与计算。你看到的“没反应”，其实是语法被忽略，最终 fallback 到rotate(0deg)或直接失效。
真正起作用的前提是：让浏览器能对这个变量做插值（比如动画中从 0deg → 45deg）。而默认的 CSS 变量没有类型定义，浏览器根本不知道--deg是角度、长度还是无单位数。
- 最简验证：给元素加
style="transform: rotate(var(--deg))"，再用 JS 设置el.style.setProperty('--deg', '30')，旋转不会发生 - Chrome/Edge 现在会静默忽略，Firefox 可能报 warning，Safari 直接不认
- 别指望
transition: transform能过渡这种写法——起始值和结束值都不可计算，插值链断了
必须用@property声明变量类型才能动画
@property是让var(--deg)具备可动画能力的唯一标准方案。它告诉浏览器：“这个变量是angle类型，取值范围是 0deg–360deg”，这样transition和@keyframes才能正确插值。
不加@property，哪怕你写transition: transform 0.3s，也只会跳变。
立即学习“前端免费学习笔记（深入）”；
- 声明示例：
@property --rotate-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; } - 之后就能安全使用：
transform: rotate(var(--rotate-angle)) - 必须设
inherits: false（否则子元素继承后可能干扰） - 目前支持：Chrome 123+、Edge 123+、Safari 17.4+（iOS 17.4+），Firefox 尚未实现
calc(var(--deg) * 1deg)能用但有兼容陷阱
这是无@property时的兜底方案，原理是把无单位数字转成带单位值，再靠calc()触发计算上下文。但它依赖浏览器对calc()在transform中的深度支持。
Safari 是最大雷区：iOS 16.4 之前完全不支持，16.4–17.3 对calc()嵌套和单位推导极不稳定（比如calc(var(--d) * 1deg)可能被当作文本丢弃）。
- 可用写法：
transform: rotate(calc(var(--deg) * 1deg))，前提是--deg只存纯数字（如45，不能是45deg） - 别写
calc(var(--deg) + 0deg)——部分 Safari 版本会解析失败 - 如果变量本身含单位（如
--deg: 45deg），calc(var(--deg))就够了，但此时无法用transition动画（无类型，不可插值） - 服务端渲染或 SSR 场景下，
calc()写法在首屏可能闪动，因为 JS 注入变量前样式已计算完毕
JS 动态控制时，style.transform比 CSS 变量更稳
如果你只是想在点击、滚动等事件中改旋转角度，直接操作el.style.transform是最可靠的方式。它绕过所有 CSS 变量解析链，由 JS 拼出完整字符串，浏览器原生支持。
尤其适合需要高频更新（如拖拽旋转）、或目标环境包含旧版 Safari / Firefox 的项目。
- 推荐模式：
el.style.transform = `rotate(${angle}deg) scale(${scale})`; - 避免反复设置
style.transform多次（比如先设 rotate，再设 scale）——后一次会覆盖前一次，应合并为单条语句 - 若需配合
transition，确保元素已有初始transform声明（如transform: rotate(0deg) scale(1)），否则从none开始无法插值 - 用
getComputedStyle(el).transform读取当前矩阵值很麻烦，不如自己维护一个状态对象（如{ rotate: 0, scale: 1 }）
实际项目里，@property是未来方向，但现在还得看兼容性要求；calc()写法看着简洁，但在 iOS 17.3 及更早版本上线前务必真机测试；而 JS 直接写style.transform虽然不够“声明式”，却是今天最不容易翻车的选择。
