css的rotate()函数不支持直接使用css变量，需通过@keyframes动画配合负animation-delay模拟角度停驻，或改用js动态设置transform。
直接用 rotate() 无法接收 CSS 变量？
不是不能，而是 rotate() 函数本身不接受变量作为参数——你写 transform: rotate(var(--angle)); 是无效的，浏览器会忽略整条声明。CSS 函数（如 rotate()、scale()）不解析自定义属性值，它们只认字面量数字 + 单位（如 45deg）。所以不能靠「动态传参」实现角度控制，得换思路。
用 @keyframes + animation 配合 animation-delay 模拟角度偏移
真正能响应 CSS 变量的是动画时序控制。比如你想让图标“停在 120°”，其实可以：让一个 360° 循环动画从某个时间点开始播放，利用 animation-delay 把起始帧“卡”在对应位置。原理是：360° 动画每 1s 转一圈，则 120° ≈ 1/3 秒 → 设 animation-delay: -0.333s，就能视觉上“定格”在那。
-
--angle: 120→ 计算出--delay: calc(-1s * var(--angle) / 360) - 动画必须用
@keyframes定义完整 0→360 序列，且animation-iteration-count: infinite -
animation-play-state: paused可选，避免自动动起来；需要时再切running - 注意负延迟值在 Safari 旧版有兼容问题，建议加
@supports (animation-delay: -1s)条件包裹
更稳妥的做法：用 transform 的矩阵或 rotateZ() + JS 注入
如果角度必须实时可变（比如拖拽控制旋转），纯 CSS 变量走不通，得交由 JS 处理。但可以保持样式解耦：
- 在 CSS 中预设多个角度类名，如
.rot-0、.rot-45、.rot-90，每个类写死transform: rotate(XXdeg) - JS 根据变量值动态切换 class，或用
element.style.transform = `rotate(${angle}deg)` - 若需过渡效果，确保元素已声明
transition: transform 0.25s ease-out（写在默认态，非 hover 或 class 切换时） - 别用
style.cssText = "transform: ..."全量覆盖，会清掉其他内联样式
为什么不用 transform-origin 或 scale 曲线骗过变量限制？
有人试过把角度藏在 transform-origin 的百分比里（比如 transform-origin: calc(var(--x) * 1%) calc(var(--y) * 1%)），但这控制的是旋转中心，不是角度本身。还有人想用 scaleX() 和 skew() 组合逼近旋转——数学上可行，但精度差、不可读、调试崩溃。真实项目里，该 JS 就 JS，别硬拗 CSS 变量。
最常被忽略的一点：旋转动画是否真需要「动态角度」？多数场景下，hover 旋转 90°、active 旋转 180°、loading 无限转 360°，这些用固定 keyframes + class 切换更稳定，也更容易做性能优化（比如用 will-change: transform 提前提示 GPU）。变量适合颜色、尺寸、延迟这类「可插值属性」，角度不是它的主场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
