直接用 --rotate-y 变量控制 transform 会失效，因为 CSS 自定义属性只是字符串，无法被 rotateY() 解析为角度值；必须配合 @property 声明 syntax: "" 才能驱动 3D 旋转。
为什么直接用 --rotate-y 变量控制 transform 会失效
因为 CSS 自定义属性（--xxx）本身只是字符串，不能被 transform: rotateY(var(--rotate-y)) 直接解析为数值角度。浏览器会把 var(--rotate-y) 当作未定义的标识符或非法值，导致整个 transform 声明被丢弃——你看到的卡片“不动”，其实是 transform 根本没生效。
真正可行的方式是：用变量控制一个中间状态（比如类名、伪元素内容、CSS 逻辑属性），再通过该状态触发预设的 transform 值。或者——更实用的是——把变量和 @property 配合使用，让变量具备类型与范围约束。
-
@property必须声明在:root或全局作用域，且需指定syntax: "<angle>"</angle>才能用于transform - 未加
@property的--rotate-y只能用于content、opacity、filter（部分函数）等接受字符串/数字的属性 - 旧版 Safari（≤16.4）不支持
@property，需降级为 class 切换方案
用 @property 让 --rotate-y 真正驱动 3D 旋转
这是目前最干净的“变量驱动交互”方案：声明一个受控的角变量，再用 transition 平滑插值。注意必须显式写 inherits: false，否则旋转值可能被继承干扰。
:root {
@property --rotate-y {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
}
<p>.card {
transform-style: preserve-3d;
transition: --rotate-y 0.4s ease;
}</p><p>.card:hover {
--rotate-y: 180deg;
}</p><p>.card__face--front {
transform: rotateY(0deg);
}</p><p>.card__face--back {
transform: rotateY(var(--rotate-y));
}关键点：
立即学习“前端免费学习笔记（深入）”；
-
transform: rotateY(var(--rotate-y))能工作，全靠@property提供了类型校验和插值能力 - 前后两面必须共用同一父容器（
.card），且该容器开启transform-style: preserve-3d - 不要对
.card__face--back单独加transition，否则翻转会“分段卡顿”
不用 @property 的兼容 fallback：class 切换 + CSS 变量辅助样式
当需要支持 Safari 15–16 或 Firefox 104 以下版本时，放弃动态插值，改用 class 控制状态，再用变量管理颜色、z-index 等配套样式。
.card.is-flipped .card__face--front { transform: rotateY(180deg); }
.card.is-flipped .card__face--back { transform: rotateY(0deg); }
<p>/<em> 用变量统一控制翻转后的背景色 </em>/
.card.is-flipped {
--card-bg: #4a5568;
}</p><p>.card__face--back {
background-color: var(--card-bg, #2d3748);
}此时变量只起“配置作用”，不是“驱动作用”。交互逻辑交给 JS：
- 监听点击或 hover，切换
.is-flipped类名 - 避免用
setTimeout模拟翻转，应依赖 CSStransition原生时机 - 移动端需补
cursor: pointer和touch-action: manipulation防止延迟
容易被忽略的 3D 渲染细节
即使变量和 class 都写对了，卡片仍可能“看起来是平的”或“背面消失”，问题往往出在渲染上下文上。
-
perspective必须加在父容器（如.card-container），而不是.card本身；值太小（如100px）会导致畸变，建议1000px起步 -
.card__face元素必须设backface-visibility: hidden，否则翻转后背面会“镜像显示”或闪烁 - 若卡片内容文字模糊，大概率是开启了硬件加速但未强制重绘，加
transform: translateZ(0)到 faces 上可修复 - Chrome 120+ 对
will-change: transform更敏感，乱加反而引发层爆炸，仅在明确滚动频繁区域才启用
变量本身不解决 3D 渲染问题，它只是状态传递的管道。真正在翻转的，永远是那一行 transform: rotateY(...) ——而它能不能正确执行，取决于你有没有给浏览器准备好完整的 3D 上下文。
