CSS变量不能直接驱动rotateX/Y/Z变化，必须配合transition和作用域控制：变量需声明在:root或父容器上，transition写在使用变量的元素上，var()须带单位且避免混用固定值与变量，rotate3d()中各轴变量需用calc()包裹并归一化。
CSS变量不能直接驱动rotateX/Y/Z的值变化，必须配合transition和作用域控制才能生效
为什么rotateY(var(--angle))写了却没反应
常见错误是把变量定义在:hover伪类里：.card:hover { --angle: 120deg; }——这不会触发重绘，浏览器压根不认。CSS变量变更本身不触发样式计算，只有它参与的属性（比如transform）真正变化时，transition才可能捕获。
- 变量必须声明在可继承的作用域，如
:root或父容器.card上 -
transition必须写在使用该变量的元素上，例如.card__face { transition: transform 0.4s ease; } -
var(--angle)必须自带单位（如120deg），不能只写120，否则解析失败后静默降级为rotateY(0) - 别在
transform里混用固定值和变量，比如transform: rotateY(0) translateZ(20px)再换成rotateY(var(--angle))，容易因声明覆盖导致动画中断
rotate3d()里用变量必须套calc()
rotate3d(var(--rx), var(--ry), var(--rz), var(--a))几乎总是失效，因为前三个参数要求纯数字，而var()未被calc()包裹时类型推断失败，Chrome会静默变成rotate3d(0,0,0,45deg)——等于没转。
- 正确写法是每个轴向变量都包一层
calc()：rotate3d(calc(var(--rx) * 1), calc(var(--ry) * 1), calc(var(--rz) * 1), calc(var(--a) * 1deg)) - 轴向值必须是归一化向量：只能是
0、1、-1，或预先算好的小数如0.707（对应45°斜向） -
var(--a)乘以1deg而非拼接deg，避免var(--a)deg这种非法语法 - IE和iOS 9.3以下完全不支持，需准备降级方案（如fallback到
rotateY(180deg)）
移动端翻转卡顿？will-change: transform得提前加
3D变换在低端安卓或iOS Safari上容易掉帧，尤其叠加perspective和多层transform时。光靠transition不够，浏览器需要提前知道哪些属性要变。
-
will-change: transform必须写在常态样式里，不能只加在:hover中，否则首次悬停仍卡顿 - 只对真正频繁变化的元素加，比如卡片正面/背面容器
.card__face，别滥用到整个.card - 若卡片含未加载完的图片或字体，layout shift会打断动画节奏，建议用
loading="lazy"或font-display: swap预加载关键资源
最易被忽略的一点：所有3D翻转依赖transform-style: preserve-3d和backface-visibility: hidden这两个声明，它们不能由变量控制，必须硬写死；一旦漏掉或被SCSS嵌套规则意外覆盖，整个3D空间就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
