纯css实现真实3d翻转需协同三个关键属性：perspective必须设在父容器.card-container上，transform-style: preserve-3d需加在.card上，backface-visibility: hidden须分别加在正背面元素上。
能用纯 CSS 实现，不需要 JS；但翻转“看起来真实”，关键不在 rotateY，而在三个属性是否协同生效。
perspective 必须加在父容器上，不能只加在卡片元素本身
很多人把 perspective: 1000px 写在 .card 上，结果翻转像平面旋转——因为 perspective 需作用于“观察者视角”，必须设在包含卡片的**外层容器**（比如 .card-container），否则子元素的 3D 变换无法被正确投影。
- ✅ 正确：
.card-container { perspective: 1000px; } - ❌ 错误：
.card { perspective: 1000px; }（此时.card自身成了“被观察对象”，失去景深） - 数值建议：800–1200px 适合大多数卡片尺寸；移动端可缩到 600px 增强立体感
transform-style: preserve-3d 是翻转生效的前提
没有它，所有子元素（.card-front 和 .card-back）会被压平到同一 Z=0 平面，rotateY 再大也像两张贴在一起的纸片在转，毫无厚度感。
- 必须加在
.card（即直接包裹正背面的容器）上，不是.card-container - 常见漏写场景：微信小程序 WXML 中，
view.card没加该样式 → 翻转动画完全失效 - 不支持 IE10 以下，但现代项目基本无需兼容
backface-visibility: hidden 不只是“防闪烁”，更是空间逻辑开关
它不只是让背面不可见，而是告诉浏览器：“这个面在当前朝向时不应参与渲染”。一旦漏掉，翻转到 90° 附近时，正反面会同时显示、重叠、错位，尤其在 Safari 和 iOS WebView 中更明显。
- 必须加在
.card-face（即正/背面元素）上，两个面都要 - 不能只加在
.card或.card-container上 - 如果用了
transform: rotateX(180deg)做上下翻转，同样需要它
hover / click 触发时，rotateY 的目标元素要选对
翻转动作应施加在**包裹正反面的中间容器**（如 .card-inner），而不是直接 rotate 正面或背面。否则两面会各自旋转，破坏空间关系。
- 结构推荐：
<div class="card"><div class="card-inner"> <div class="front">...</div> <div class="back">...</div> </div></div> - 触发写法：
.card:hover .card-inner { transform: rotateY(180deg); } - transition 要写在
.card-inner上，不是.card，否则动画不连贯 - 移动端需额外加
touch-action: manipulation提升点击响应
真正卡住人的往往不是 rotateY 写错，而是 perspective 层级错位、preserve-3d 缺失、或 backface-visibility 漏写在某一面——这三个点只要一个没对齐，整个 3D 空间就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
