直接用transform: rotateY()翻转不自然，因缺perspective提供纵深感和transform-style: preserve-3d维持3D上下文，导致浏览器按平面渲染；阴影需用filter: drop-shadow()替代box-shadow才能随翻转动态变化。
为什么直接用 transform: rotateY() 会翻得不自然
卡片翻折看起来“假”，往往是因为没配合同步的透视（perspective）和容器隔离。纯靠子元素自己 rotateY(180deg)，没有父容器提供视觉深度参考，浏览器就按平面旋转渲染，阴影也不会随角度变化——它还钉死在原始位置。
关键点：必须在卡片容器（比如 .card）上设 perspective，且值不宜过小（600px～1000px 较稳妥），同时让卡片本身开启 transform-style: preserve-3d，否则子面（正面/背面）会被拍平。
-
perspective必须加在父容器（如.card-wrapper），不能只加在卡片自身 - 卡片元素需显式设置
transform-style: preserve-3d - 正反面要用
position: absolute叠在一起，并分别设backface-visibility: hidden
阴影怎么做到“跟着翻转角度动”而不是固定不动
CSS 的 box-shadow 本身不响应 transform，它永远相对于元素的原始布局框投射。想让它“动”，就得换思路：用伪元素 + transform 模拟动态阴影，或者更可靠地——用 filter: drop-shadow()。
drop-shadow() 是滤镜，作用于元素最终渲染形态，包括所有 transform 后的效果，所以它天然跟随翻转角度变化。但注意：它不支持多层阴影写法（如 box-shadow: 0 4px 12px, 0 8px 24px），且边缘可能轻微模糊。
立即学习“前端免费学习笔记（深入）”；
- 优先用
filter: drop-shadow(0 12px 24px rgba(0,0,0,0.2))替代box-shadow - 若需锐利阴影，可额外加一个
::before伪元素，用transform: scaleY(0.3) rotateX(90deg)做“压扁投影”，再配合透明度和模糊 - 避免在翻转动画中同时 animating
box-shadow和transform，易触发重排，卡顿明显
transition 写在哪一层？为什么卡片翻一半就卡住
常见错误是把 transition 加在 :hover 触发的子元素上（比如只给 .card:hover .front 加），导致正反面过渡不同步。正确做法是：把 transition 放在卡片默认状态（未 hover）的根元素上，且涵盖所有参与动画的属性。
卡顿还常因用了 transform: rotateY(180deg) 但没配 transform-origin: center —— 默认原点在左上角，翻出来像抽风。另外，will-change: transform 在复杂页面中能提前提示合成器，但别滥用，只加在真正频繁动画的卡片上。
- 在
.card上统一写：transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) - 务必补上
transform-origin: center，否则旋转轴偏移 - 避免对
top/left等布局属性做 transition，强制触发 layout
移动端触摸下翻折失效或延迟怎么办
iOS Safari 和部分安卓 WebView 对 hover 支持极弱，甚至完全忽略。纯靠 :hover 实现的翻折，在手机上点一下没反应、点两下才翻，或者干脆不翻。
解法不是加 JS 监听 click，而是用媒体查询降级 + :active 补充。更稳妥的是用 @media (hover: hover) 区分设备能力，有 hover 能力的走 CSS 翻折，没有的改用点击切换 class（JS 最少介入）。
- 基础兼容写法：
@media (hover: none) { .card:hover { transform: none; } } - 为触屏加
.card:active { transform: rotateY(180deg); }，虽不持久但有反馈 - 真要持久翻转（如查看背面内容），必须用 JS 切换
.is-flippedclass，CSS 只负责动画逻辑
perspective 的作用域和 transform-style 的继承关系——它们不像颜色或字体那样“向下透传”，必须每一层都显式声明，否则 3D 效果就在某一层突然塌陷。 
