必须用CSS变量--rotate-angle控制翻转角度，配合transform-origin变量实现轴心偏移，且需显式声明transition监听变量变化，同时保留transform-style:preserve-3d和backface-visibility:hidden等必要3D上下文声明。
用 --rotate-angle 控制翻转起始角度，别硬写死 45deg
卡片翻转动画卡在“只能正反翻”？问题常出在把旋转值写死在 transform: rotateY(180deg) 里。CSS 变量真正有用的地方，是让翻转角度可配置——比如悬停时只转 120deg，点击后才补到 180deg。定义变量时直接挂载在卡片容器上：
:root { --rotate-angle: 180deg; }<br>.card { transform: rotateY(var(--rotate-angle)); }注意：变量必须声明在能被继承的作用域（如 :root 或父元素），且不能放在伪类里（.card:hover { --rotate-angle: 120deg; } 是无效的，浏览器不触发重绘）。
翻转轴心点偏移靠 transform-origin + 变量联动
默认绕中心翻转，但要模拟“从右侧掀开”或“底部翻页”，就得动态调 transform-origin。变量可以和它配合：
.card {<br> --origin-x: 100%;<br> --origin-y: 50%;<br> transform-origin: var(--origin-x) var(--origin-y);<br> transform: rotateY(var(--rotate-angle));<br>}关键点：两个变量必须同时存在，否则 transform-origin 会退化为单值（如只设 --origin-x，y 会回退到 50%）。实测中，transform-origin 的变量值不能带单位混用（var(--origin-x) 0 会失效），必须统一为百分比或 px。
transition 必须监听变量变化，否则动画不触发
光改变量没用——CSS 不会自动监听自定义属性变更。必须显式告诉浏览器哪些属性要过渡：
.card {<br> transition: transform 0.4s ease,<br> transform-origin 0.2s ease;<br>}这里有两个坑：
- 如果只写
transition: all 0.4s，部分浏览器（尤其是 Safari）对变量驱动的transform过渡支持不稳定 -
transform-origin的过渡必须单独列出，否则偏移切换会突变 - 变量值变化本身不会触发重排，所以必须配合类名切换或 JS 修改
style.setProperty()
card.style.setProperty('--rotate-angle', '120deg');
3D 翻转需开启 transform-style: preserve-3d，变量无法替代这个声明
卡片正面背面内容消失？大概率漏了 3D 上下文。CSS 变量再灵活，也不能代替这个强制声明：
.card { transform-style: preserve-3d; }<br>.card__front, .card__back { backface-visibility: hidden; }注意：preserve-3d 必须加在翻转容器（即设了 rotateY 的元素）上，不是加在子元素；backface-visibility 则必须分别加在前后两面。变量在这里唯一能做的，是控制 perspective 深度：.card { --perspective: 1200px; perspective: var(--perspective); }但这个值影响的是视觉扭曲程度，和是否显示背面无关。
立即学习“前端免费学习笔记（深入）”；
