卡片翻转角度不随悬停变化，需用CSS变量解耦角度与动画逻辑：在容器设perspective，子元素设transform-style: preserve-3d并绑定var(--rotate-x)和var(--rotate-y)，悬停时仅更新变量值，transition写在使用变量的元素上，确保变量作用域正确且带单位。
卡片翻转时角度不随悬停变化？用 --rotate-x 和 --rotate-y 动态控制
CSS 变量本身不能直接触发动画，但可以和 transform 配合，在悬停时更新变量值，再让 transition 捕捉到变化。关键不是“用变量实现翻转”，而是“用变量解耦角度值与动画逻辑”。常见错误是把 rotateX() 写死在 transform 里，导致无法响应式调整角度。
- 必须给容器（如
.card）设perspective，否则rotateX/Y看不出 3D 效果，建议值1000px -
transform中的rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg))要写在翻转元素（如.card__face）上，且该元素需设transform-style: preserve-3d - 悬停时只改变量值，不要重写整个
transform，否则会覆盖变量绑定：.card:hover { --rotate-x: 45deg; --rotate-y: 60deg; }
为什么 transition 不生效？检查变量是否被正确继承和触发
CSS 变量的值变更本身不会触发重绘，只有它参与的属性（如 transform）发生变化时才会触发动画。如果 transition: transform 0.4s ease 写在子元素上，但变量定义在父级，子元素又没声明 inherit 或默认继承，那变量更新就“看不见”。
- 确保变量定义在可被子元素读取的作用域，例如写在
:root或.card上，且子元素未用!important覆盖 -
transition必须写在使用变量的元素上，不是变量定义处。比如.card__face { transition: transform 0.4s ease; } - 避免在
transform中混用单位：var(--rotate-x)必须自带单位（如45deg），不能只写数字
移动端触摸下翻转卡顿？用 will-change 提前告知渲染层
3D 变换在低端设备或复杂布局中容易掉帧，尤其配合 perspective 和多层 transform 时。单纯加 transition 不够，浏览器需要知道哪些属性即将变化。
- 对翻转主体（如
.card__face）添加will-change: transform，但不要滥用——仅用于真正频繁变化的元素 - 避免在
:hover里动态加will-change，它应在常态下就存在，否则首次悬停仍会卡顿 - 若卡片内容含图片或字体，确保它们已加载完成再触发翻转，否则 layout shift 会干扰动画节奏
IE 或旧 Safari 不支持变量？降级方案要保留原生 transform
CSS 变量在 IE 完全不支持，iOS 9.3+、Chrome 49+ 才稳定可用。如果项目需兼容旧环境，不能只依赖变量驱动翻转。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports ( --a: 0 )包裹变量版样式，内部写变量逻辑；外部写 fallback 的静态transform - fallback 示例：
.card__face { transform: rotateX(0deg) rotateY(0deg); }<br>@supports ( --a: 0 ) {<br> .card__face { transform: rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg)); }<br>} - 注意：Safari 12.1 之前对
var()在transform中的支持不稳定，建议测试rotateZ(var(--z))是否能解析
变量名命名和作用域层级最容易被忽略——比如把 --rotate-y 定义在 .card，却在 .card__back 里读取，而后者没继承该变量，结果就是翻转角度始终为 0deg。调试时先用 getComputedStyle(el).getPropertyValue('--rotate-y') 确认值是否真的传下去了。
