必须用嵌套容器结构：外层.card设perspective和preserve-3d，内层.front/.back均absolute定位、backface-visibility:hidden，.back需预设rotatey(180deg)，通过:hover或js切换类触发翻转。
翻转卡片的HTML结构必须用嵌套容器包裹前后内容
直接对单个元素设置 transform: rotateY(180deg) 无法实现“卡片”效果，因为翻转后内容会镜像显示。真实翻转需要两层：外层容器负责旋转（.card），内层两个子容器分别承载正面（.card-front）和背面（.card-back），且都需设置 backface-visibility: hidden，否则翻转后能看到背面内容的镜像。
常见错误是把前后内容写成同级兄弟元素，或漏掉 backface-visibility，导致翻转时闪烁、透底或文字反向。
- 外层容器设
perspective（推荐 1000px），影响3D景深感 -
.card设transform-style: preserve-3d，否则子元素不参与3D空间 -
.card-front和.card-back都要设position: absolute+top: 0; left: 0; width: 100%; height: 100%，确保重叠 -
.card-back需额外加transform: rotateY(180deg)，让它初始就朝后
触发翻转必须用:hover或JS切换类，不能只靠CSS动画
纯 @keyframes 动画无法响应用户交互，必须绑定到状态变化。最常用的是 :hover，但要注意触发区域——如果只给 .card-front 设 :hover，鼠标移开正面就翻回，背面无法悬停；正确做法是给外层 .card 设 :hover，再通过后代选择器控制内部旋转。
若需点击翻转（比如移动端），就得用JS切换一个类名（如 .is-flipped），并用该类名覆盖默认旋转值。
-
.card:hover .card-inner { transform: rotateY(180deg); }是典型写法，其中.card-inner是包裹前后页的中间容器 - 用JS时，避免直接操作
style.transform，改用element.classList.toggle('is-flipped')更可控 - 移动端需补
cursor: pointer或监听click，iOS Safari 对:hover支持有限
rotateY翻转在Safari上容易失效，必须加私有前缀和兜底
Safari 15.4 之前对 transform-style: preserve-3d 支持不完整，尤其嵌套较深时会退化为2D渲染，导致翻转卡顿或不动。错误现象包括：只动了一半、背面完全消失、翻转后位置偏移。
解决方案不是删功能，而是加兼容性补丁：
- 所有
transform属性同时写标准版和-webkit-前缀：-webkit-transform: rotateY(180deg); transform: rotateY(180deg); - 给
.card加-webkit-perspective: 1000px; - 若仍异常，尝试把
.card的display改为inline-block（Safari 对flex容器内 preserve-3d 支持更差） - 不用
will-change: transform，它在旧 Safari 上反而引发重绘bug
性能关键：避免翻转时触发重排，只用transform+opacity
如果在翻转动画中修改 width、height、margin 或 left/top，浏览器会强制同步重排（layout），造成卡顿。翻转必须严格限定在合成层属性内。
实际项目中容易踩的坑是：为了“居中”给 .card 加 margin: auto，结果翻转时因父容器尺寸计算引发抖动；或给 .card-back 加 z-index 试图控制层级，其实毫无必要——3D空间里 transform 已决定前后关系。
- 确保
.card父容器有明确宽高（比如width: 300px; height: 200px;），避免依赖内容撑开 - 动画只用
transform和opacity，两者可由GPU加速 - 加
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1)比默认ease更自然，且避免用all
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
