必须按三层结构+四个关键属性配齐：perspective加父容器、transform-style: preserve-3d加翻转主体、正反面均设backface-visibility: hidden且背面初始化rotateY(180deg)、移动端用JS切换class而非:hover。
能做，但必须按三层结构+四个关键属性配齐，缺一不可；否则翻转会闪、镜像、没纵深感，甚至点击穿透。
perspective 必须加在父容器，不是卡片本身
很多人一写就给 .card 加 perspective: 1000px，结果翻转像纸片抽动——因为 perspective 定义的是“你站在哪看这个 3D 场景”，它得作用于包含卡片的**最近一层父容器**，比如 .card-container。卡片只是子元素，要靠继承才能产生弧线翻转。
-
perspective值推荐从800px起调；500px畸变强、2000px几乎无感 - 别和
transform: perspective(1000px)混用——后者只影响单个元素，且不触发子元素的 3D 继承 - uni-app 或小程序中，确保样式写在包裹
<view class="card">的外层<view class="card-wrapper">上
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 控制状态。
- HTML 中给容器加
ontouchstart="this.classList.toggle('is-flipped')"是快速方案，但更稳妥的是用addEventListener('click', ...)或小程序的bindtap - CSS 中用
.card.is-flipped { transform: rotateY(180deg); }替代:hover规则 - 注意：某些安卓 WebView 对
transition支持不稳定，建议加will-change: transform提前告知渲染引擎
最容易被忽略的是 overflow: hidden 和 opacity < 1 这类属性——它们会强制浏览器把 3D 子元素“压平”，直接让 preserve-3d 失效。只要用了翻转，整个祖先链上都不能出现这些隐性破坏项。
