CSS变量控制翻转需确保作用域匹配、单位正确、transition绑定到使用变量的元素，并设perspective于容器父级；移动端应避免纯:hover，改用focus-within或JS切换class。
直接用 CSS 变量控制翻转角度是可行的，但必须让 transform 真正“看到”变量变化并触发重绘——否则角度不会动，动画也不会生效。
为什么 rotateY(var(--angle)) 不触发动画？
CSS 变量本身不参与渲染，只是存储值；浏览器只在它所影响的属性（比如 transform）发生计算结果变化时才重绘。如果变量定义在父级，而 transform 写在子元素上，又没显式继承或作用域穿透，那子元素根本读不到新值。
-
--angle必须定义在能被目标元素读取的作用域，例如:root或翻转容器自身（如.card） - 使用变量的元素（如
.card__face）必须声明transform: rotateY(var(--angle, 0deg))，且--angle值带单位（45deg，不能只写45） -
transition: transform 0.4s必须写在使用变量的那个元素上，不是变量定义处
怎样让 hover 或 JS 更新变量后立刻翻转？
关键不是“改变量”，而是确保变量更新后，transform 的计算结果确实变了——这要求变量和 transform 在同一作用域或可继承链上。
- 推荐把变量定义在翻转容器上：
.card { --rotate-y: 0deg; }，然后在子面层写：.card__face { transform: rotateY(var(--rotate-y)); } - 悬停时只更新变量：
.card:hover { --rotate-y: 180deg; }，不要重写整个transform，否则会覆盖变量绑定 - 若用 JS 控制，直接操作
element.style.setProperty('--rotate-y', '120deg')，比切换 class 更灵活
移动端点击翻转卡顿或失效怎么办？
纯 :hover 在 iOS/Android 上不可靠：首次点击可能无响应，连点易错乱，且无法键盘聚焦。
立即学习“前端免费学习笔记（深入）”；
- 给卡片加
tabindex="0"，启用:focus-within，兼顾键盘与触控 - 更稳妥的做法是用 JS 绑定
click，配合classList.toggle('is-flipped')，再让 CSS 响应这个 class - 对翻转主体（如
.card__face）加will-change: transform，但必须写在常态样式里，不能只在:hover中加 - 避免在翻转过程中动态加载图片或字体，否则 layout shift 会打断动画节奏
最常被忽略的一点：perspective 必须设在翻转容器的**父级或同级 wrapper 上**，而不是直接写在 .card__face 上——否则 3D 效果会塌陷成 2D 压缩，无论变量怎么变，都看不出深度。
