CSS变量不能直接用于transform函数参数，必须用calc()包裹单位化数值或用JS动态拼接完整transform字符串；transform-origin支持变量但需注意单位和关键字顺序陷阱。
transform 不能直接用 CSS 变量插值，必须用 calc() 或自定义属性 + JS
直接写 transform: translateX(var(--x)); 是无效的——CSS 不允许在函数参数里直接展开变量。浏览器会忽略整条 transform 声明。真正起作用的方式只有两种：一是用 calc() 包裹单个维度（仅限长度/角度类值），二是把整个 transform 字符串交给 JS 动态拼接并写入 style.transform。
calc() 能处理的 transform 维度很有限
calc() 只能用于支持计算的单位上下文，比如 translateX()、rotate()、scale() 的数值参数，但不能用于 matrix() 或 skew() 的任意参数位置。常见有效组合有：
-
transform: translateX(calc(var(--dx) * 1px));——--dx是数字，乘以单位才合法 -
transform: rotate(calc(var(--deg) * 1deg));—— 同理，单位必须显式写出 -
transform: scale(calc(1 + var(--scale-offset)));—— 支持小数加减，但不能是纯字符串 - 不支持：
transform: matrix(var(--a), ...);或transform: skew(calc(var(--x) * 1deg), var(--y));（第二个参数无单位会失败）
matrix() 和复合变换必须靠 JS 拼接
当你需要动态控制多个参数（比如同时调 a, b, e, f），或想把 translate + rotate + scale 合成一条声明时，CSS 变量无法胜任。这时得用 JS 读取变量，生成完整字符串：
element.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
或者更实用的写法：
const x = getComputedStyle(element).getPropertyValue('--tx'); // "50"
const r = getComputedStyle(element).getPropertyValue('--rot'); // "0.866"
element.style.transform = `translateX(${x}px) rotate(${r}rad)`;
注意：getComputedStyle 返回的是字符串，需 parseFloat 或模板字面量安全拼接；另外，JS 设置的 transform 会覆盖 CSS 中的声明，要统一管理来源。
transform-origin 也支持变量，但有单位陷阱
transform-origin 可以直接使用变量，例如：
.box { --ox: 20%; --oy: top; transform-origin: var(--ox) var(--oy); }
但要注意：
-
var(--ox)必须带单位（如20%、10px），不能只写20 -
top/center/bottom这类关键字可以单独用变量，但不能和数字混用（var(--pos) 50%在部分浏览器会失效） - 如果变量来自 JS 注入，建议统一用
px或%，避免解析歧义
最易被忽略的是：transform-origin 的两个值顺序会影响坐标系解释逻辑——第一个值优先匹配 x 方向，但如果它是 top 或 bottom，浏览器会把它当作 y 偏移，此时第二个值才被当 x 偏移。这种隐式行为在变量驱动时很难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
