CSS变量不能直接用于transform函数如rotate(var(--deg))，需通过@property声明类型、calc()包裹或内联style设置；否则动画失效或不兼容。
transform里不能直接用CSS变量？得用calc或自定义属性配合
直接写 transform: rotate(var(--deg)) 会失效——浏览器不支持在 transform 函数中裸用 CSS 变量。CSS 变量只能用于可计算的值上下文，而 rotate() 的参数不是独立数值类型，它依赖函数语法解析。
真正可行的方式是把角度值提前注入到 transform 声明中，靠浏览器运行时解析。常见做法有：
- 用
style属性内联设置：元素动态加style="transform: rotate(45deg)" - 用
@property（需支持）声明受控的数字型自定义属性，再在transform中引用 - 更通用的方案：用
calc()包裹变量，但仅适用于单位明确、可参与计算的场景（如rotate(calc(var(--deg) * 1deg))），注意 Safari 对这种写法支持较晚（iOS 16.4+）
用@property让CSS变量参与transform动画
@property 是让 CSS 变量具备类型和范围控制能力的关键。没有它，transition 或 @keyframes 无法对 var(--deg) 做插值动画——浏览器不知道这是角度还是长度。
必须这样声明：
立即学习“前端免费学习笔记（深入）”；
@property --deg {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}之后才能写：
.rotating {
transform: rotate(var(--deg));
transition: --deg 0.3s ease;
}然后 JS 改值：el.style.setProperty('--deg', '90deg')，动画就自然触发。不声明 @property，Chrome 和 Firefox 会静默忽略过渡，Safari 则可能完全不动。
JS动态改旋转角时，避免重排重绘的写法
频繁调用 element.style.transform = 'rotate(' + deg + 'deg)' 看似简单，但若在循环或 requestAnimationFrame 里高频执行，容易触发 layout thrashing（尤其当元素有 offsetTop/offsetLeft 读取时）。
更稳妥的做法是：
- 只用
style.setProperty('--deg', deg + 'deg')更新 CSS 变量，让 CSS 引擎自己合成 transform - 确保目标元素已设
will-change: transform（仅对持续动画的元素，别滥用） - 避免在
transform外还同时修改width、height或margin等触发布局的属性 - 如果角度来自鼠标/触摸位置，用
transform: rotateZ()替代rotate()，语义更明确且兼容性一致
IE 和旧版 Safari 怎么 fallback？
IE 完全不支持 CSS 变量和 @property；Safari 14.1 之前不支持 @property，Safari 15.4 之前不支持 calc() 在 rotate() 中混合单位（如 calc(var(--d) * 1deg)）。
务实方案是分层降级：
- 基础层：用 class 控制固定角度（
.rotate-90→transform: rotate(90deg)） - 增强层：检测
CSS.supports('animation-timeline', 'auto')或尝试设置@property后读取验证 - JS 层：对不支持的 UA，直接操作
style.transform，并手动实现简易 easing（不用 CSS transition）
别指望一套 CSS 规则通吃所有环境。动态旋转角度的核心约束始终是：CSS 变量本身不驱动渲染，它只是数据容器；真正触发变化的，是浏览器对 transform 值的重新解析与合成——这个过程是否可缓存、可动画、可硬件加速，取决于你喂给它的究竟是字符串，还是被声明过类型的可控值。
