直接用 rotate(var(--angle)) 可行，但变量值必须带单位（如45deg），否则 transform 声明失效；标准化要求统一单位、命名、更新方式和 fallback；js 动态设置需显式拼接 'deg'，三维旋转须分设 x/y/z 变量。
直接用 rotate(var(--angle)) 是可行的，但前提是变量值必须带单位（如 45deg），且不能被空格、换行或 JS 误删单位破坏。所谓“标准化”，本质是统一单位格式、命名语义、更新方式和 fallback 行为。
变量声明必须含单位，且不可拆分
CSS 不会自动给数字补 deg，哪怕你写 --angle: 90，rotate(var(--angle)) 也会被浏览器忽略——整条 transform 声明失效，不是转 0°，而是退回到未设置状态。
-
:root { --icon-rotate-cw-90: 90deg; --icon-rotate-ccw-45: -45deg; }✅ 单位内嵌，安全 - 避免
--icon-rotate-base: 90+rotate(calc(var(--icon-rotate-base) * 1deg))❌calc()在rotate()内不生效，且类型转换不可靠 - 多个角度共用同一变量名时，务必确认所有赋值点都拼了单位（JS、CSS、HTML style 属性）
JS 动态更新时单位拼接不能省略
用户输入、动画帧计算、拖拽反馈等场景下，角度常来自数值运算，此时 JS 必须显式加单位，否则 CSS 变量值就变成纯数字，rotate() 直接失能。
-
element.style.setProperty('--icon-rotate', value + 'deg')✅ 安全，支持负数（-120deg） -
element.style.setProperty('--icon-rotate', parseInt(value))❌ 丢单位，也丢小数和负号 - 输入为空或非数字时，
'' + 'deg'→'deg'，浏览器静默忽略，视觉上“消失旋转”，难定位 - 建议加简单校验：
const deg = /^\-?\d+\.?\d*$/.test(value) ? value + 'deg' : '0deg'
别混用二维 rotate() 和三维 rotateX/rotateY
rotate() 等价于 rotateZ()，它只控制 Z 轴。如果项目里同时需要俯仰（X）、偏航（Y）、翻滚（Z）三轴旋转，不能共用一个 --icon-rotate 变量。
- 三维场景应分设：
--icon-rotate-x: 15deg、--icon-rotate-y: 30deg、--icon-rotate-z: 45deg - 组合写法：
transform: rotateX(var(--icon-rotate-x)) rotateY(var(--icon-rotate-y)) rotateZ(var(--icon-rotate-z)) - 混用会导致语义混乱：比如
--icon-rotate: 90deg在rotateX()里就是抬头 90°，在rotate()里却是顺时针躺平——维护者根本无法预期行为
最容易被忽略的是变量复用边界：一套“标准化”角度变量，只应在同维度、同用途（比如全是 UI 图标静态朝向）下共享；一旦涉及动画起始帧、3D 模型姿态、或响应式断点切换，就得拆成独立变量链，而不是靠一个 --angle 打天下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
