perspective 必须加在卡片父容器而非卡片本身，transform-style: preserve-3d 必须加在卡片上，正反面均需 backface-visibility: hidden 且背面初始化 rotatey(180deg)，移动端须用 js 切换 class 实现翻转。
perspective 不能直接加在要翻转的卡片上，必须加在它的父容器；否则翻转没有纵深感，像纸片抽动。
perspective 必须作用于父容器，不是卡片本身
很多人一写就给 .card 加 perspective: 1000px，结果翻转僵硬、无立体感——因为 perspective 定义的是“你站在哪看这个 3D 场景”，它需要作用于**包含卡片的最近一层父容器**，比如 .card-container。卡片只是子元素，靠继承才能产生真实弧线翻转。
-
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 或单个面。
- 典型结构：
<div class="card-container"><div class="card"> <div class="card__front"></div> <div class="card__back"></div> </div></div>，那么transform-style: preserve-3d应设在.card - 加错位置后果严重：加在最外层但中间没 transform，正反面仍被压平；加在
.card__front上则完全无效——它没有子元素需要保持 3D 位置 - 缺了它，
rotateY就退化成纯 2D 旋转，背面内容要么消失，要么镜像显示
backface-visibility 和初始 rotateY(180deg) 缺一不可
翻转中途闪屏、背面文字镜像、或翻到一半突然黑掉——这些问题几乎都源于正反面没同时处理这两个属性。
- 两个面（
.card__front和.card__back）都要加backface-visibility: hidden -
.card__back必须初始化为transform: rotateY(180deg)，否则翻转后看到的是倒着的文字 - 两个面要用
position: absolute叠在同一区域，尺寸一致，否则翻转时会跳动
移动端必须用 JS 切换 class，不能只靠 :hover
微信小程序、uni-app、iOS Safari 等环境不支持伪类 :hover 的稳定触发，且触摸事件不会自动映射为 hover。必须用 JS 监听点击/触摸，通过切换 class 控制状态。
- 不要写
.card-container:hover .card { transform: rotateY(180deg); }—— 在真机上大概率失效 - 应监听
tap或click，动态添加如is-flipped类，并在 CSS 中定义.card.is-flipped { transform: rotateY(180deg); } - 注意 iOS Safari 对
transform-style: preserve-3d的兼容性较弱，建议加-webkit-transform-style: preserve-3d
最容易被忽略的是三层结构的职责划分：父容器管 perspective，翻转容器管 transform-style 和 transform，正反面各自管 backface-visibility 和初始 rotateY。少一个，3D 效果就塌一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
