perspective 必须加在父容器（如 .card-container）而非卡片本身，transform-style: preserve-3d 应设在 .card 上，backface-visibility: hidden 和 rotatey(180deg) 需同时作用于正反面，移动端须用 js 切换 class 触发翻转。
perspective 必须加在父容器上，不是卡片本身
很多人一写就给 .card 加 perspective: 1000px，结果翻转没纵深感——因为 perspective 定义的是“你站在哪看这个 3D 场景”，它必须作用于**包含卡片的最近一层父容器**，比如 .card-container。卡片只是子元素，它需要继承这个 3D 观察点才能产生弧线翻转。
常见错误现象：transform: rotateY(180deg) 只有纸片抽动效果，像平面切换；根本原因是缺少透视锚点。
-
perspective值推荐从800px起调，500px畸变强、2000px几乎无感 - 别和
transform: perspective(1000px)混用——后者只影响单个元素，且不触发子元素的 3D 继承 - uni-app 或小程序中，确保样式写在包裹
<view class="card"></view>的外层<view class="card-wrapper"></view>上
transform-style: preserve-3d 要加在翻转主体容器上
这个属性不是可有可无的装饰，它是让正反面真正“分层”在 3D 空间里的关键。它必须加在**直接包裹正反面元素的容器**上，也就是执行 rotateY() 的那个元素（通常是 .card），而不是最外层 wrapper 或单个面。
如果加错位置：加在最外层但中间没 transform，正反面仍被压平；加在 .card__front 上则完全无效——它没有子元素需要保持 3D 位置。
- 结构典型是：
<div class="card-container"><div class="card"> <div class="card__front"></div> <div class="card__back"></div> </div></div>，那么transform-style: preserve-3d应该设在.card - 缺了它，
rotateY就退化成纯 2D 旋转，背面内容要么消失，要么镜像显示
backface-visibility: hidden 和初始 rotateY(180deg) 缺一不可
翻转中途闪屏、背面文字镜像、或翻到一半突然黑掉——这些问题几乎都源于正反面没同时处理这两个属性。
backface-visibility: hidden 是防透出，transform: rotateY(180deg) 是让背面“朝前站好”，否则翻转后内容是反的。
- 两个面（
.card__front和.card__back）都要加backface-visibility: hidden -
.card__back必须初始化为transform: rotateY(180deg)，否则 hover 后看到的是倒着的文字 - 两个面要用
position: absolute叠在同一区域，尺寸一致，否则翻转时会跳动
移动端必须用 JS 切换 class，不能只靠 :hover
iOS Safari 和 Android Chrome 在非可点击元素上默认不响应 :hover，所以纯 CSS 的 hover 翻转在手机上基本失效。
正确做法是用 JS 监听 touchstart（或 click），通过 element.classList.toggle() 控制状态类，比如 .is-flipped。
- 过渡样式（
transition: transform 0.6s）要写在基础状态.card上，不要写在.is-flipped里 - 避免用
setAttribute反复操作 class，容易覆盖其他 class - 祖先元素若有
overflow: hidden或transform: translateZ(0)，可能截断 3D 渲染层，需逐级检查
最容易被忽略的其实是层级关系：perspective、preserve-3d、backface-visibility 这三者必须在正确的 DOM 层级上配合生效，差一层，整个 3D 空间就坍缩成平面。调试时优先打开浏览器 3D 视图工具，确认正反面是否真正在 Z 轴上分离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
