CSS变量直接传入rotate3d()失效，因前三个参数需纯数字，而var()未被calc()包裹时类型推断失败，导致浏览器静默降级为rotate3d(0,0,0,angle)；必须用calc(var(--rx)*1)等强制数值解析，并确保轴向为归一化向量。
为什么直接用 CSS 变量传入 rotate3d() 会失效
因为 rotate3d(x, y, z, angle) 的前三个参数是数字（无单位），而 CSS 变量若未被解析为纯数字，浏览器会将其当作无效值丢弃——哪怕你写了 --rx: 1，在 rotate3d(var(--rx), 0, 0, 45deg) 中，var(--rx) 实际参与计算时仍可能因上下文缺失类型推断而被忽略。Chrome 会静默降级为 rotate3d(0, 0, 0, 45deg)，结果就是不转。
常见错误现象：transform: rotate3d(var(--rx), var(--ry), var(--rz), var(--a)); 看似合理，但几乎总无效。
- 必须确保变量值是纯数字（不能带空格、单位或表达式）
- 必须用
calc()显式触发数值计算上下文，否则变量不“求值” - IE 和旧版 Safari 完全不支持变量在
rotate3d()中动态插值
用 calc() + var() 组合强制解析轴向变量
核心技巧：把每个轴向变量包进 calc()，让浏览器明确知道这是数值运算。即使只是 calc(var(--rx) * 1)，也能激活类型收敛。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
:root {
--rx: 1;
--ry: 0;
--rz: 0;
--a: 45;
}
<p>.cube {
transform: rotate3d(
calc(var(--rx) <em> 1),
calc(var(--ry) </em> 1),
calc(var(--rz) <em> 1),
calc(var(--a) </em> 1deg)
);
}-
calc(var(--a) * 1deg)是关键：乘以带单位的1deg，既保证角度有单位，又避免var(--a) deg这种非法拼接（CSS 不允许变量后直接跟单位） - 所有轴向变量必须是
0或1或-1——rotate3d()要的是归一化方向向量，2或0.5会导致旋转轴缩放失真 - 如果需要任意方向（如斜向 45°），应预先算好归一化分量：
--rx: 0.707; --ry: 0.707; --rz: 0;，再用calc()
用 JS 动态更新变量实现交互式魔方旋转
纯 CSS 变量无法做三角函数实时计算，所以魔方多面联动、拖拽旋转等必须靠 JS 更新变量值。但注意：别直接设 style.setProperty('--rx', Math.sin(theta))，小数精度和舍入可能破坏归一化。
- JS 中先计算归一化轴向：
const ax = Math.sin(yaw) * Math.cos(pitch);等，再四舍五入到小数点后 3 位 - 批量更新变量，避免多次重排：
el.style.cssText = '--rx: ' + ax + '; --ry: ' + ay + '; --rz: ' + az + '; --a: ' + deg + ';' - 动画性能敏感：改
transform属性本身比改变量再触发 CSS 计算更快；变量方案适合「状态快照」或「配置驱动」场景，比如预设 6 个面切换
典型使用场景：点击按钮切换到「顶面」，JS 设置 --rx:1; --ry:0; --rz:0; --a:90;，配合 transition: transform 0.3s ease 实现翻转。
兼容性与 fallback 方案怎么设
CSS 变量 + rotate3d() 在 iOS 14.5+、Chrome 49+、Firefox 31+ 可用，但 Android UC、QQ 浏览器旧内核可能跳过整条 transform 声明。
- 务必写双声明：先写静态 fallback（如
transform: rotateX(90deg);），再覆盖变量版，CSS 会忽略不支持的那行 - 不要依赖
@supports (rotate3d: 1, 0, 0, 45deg)—— 这个语法不被支持；改用@supports (--a: 0)检测变量支持 - 魔方类复杂 3D 效果，一旦降级，建议整个
.cube加opacity: 0.8视觉提示“非原生 3D”
真正难的不是写对变量，而是保证 --rx/--ry/--rz 始终构成单位向量——少一个 calc()，或 JS 算错归一化，魔方就歪着转，而且很难 debug。
