必须设transform-style: preserve-3d，否则子元素被压平成2D，rotateY/X无效；需加在直接包裹正反面的容器上，且移动端需补-webkit前缀。
翻转动画必须设 transform-style: preserve-3d
不加这句，所有子元素都会被压平成2D，rotateY 或 rotateX 看不出翻转效果，只像左右/上下位移。它不是可选项，是3D翻转的开关。
常见错误现象：
- 背面内容在未翻转时就显示出来（
backface-visibility: hidden失效） - 翻转卡顿、跳变，或只动了一半
- Chrome 正常，Safari 完全不动——大概率漏了
preserve-3d或没加-webkit-transform-style
实操建议：
- 必须加在直接包裹前后两面的容器上（比如
.card），而不是最外层.card-container - 移动端 Safari 需补前缀：
-webkit-transform-style: preserve-3d - 如果用了 Flex 或 Grid 布局，确认父容器没有意外触发
transform（如scale），会干扰 3D 上下文
backface-visibility: hidden 要加在正反两面元素上
只给正面加没用，背面也得加。否则翻转到一半时，背面会“透”出来，像双面胶纸一样叠在一起。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 卡片类交互（产品信息/问答折叠）
- 按钮悬停反馈（如「确认/取消」双态切换）
- 表单验证提示（正面输入框，背面错误文案）
参数差异：
-
hidden：彻底隐藏不可见面（推荐） -
visible：两面始终可见，适合做双面展示（如骰子、多面体） - 不写该属性 = 默认
visible，这是很多初学者翻转“穿模”的根源
hover 触发和 click 触发的 DOM 结构要分开设计
用 :hover 实现翻转，结构可以扁平；但想用 JavaScript 控制点击翻转，就得提前把背面内容旋转好，且靠 class 切换而非伪类。
容易踩的坑：
- 用
:hover写法却在 JS 中 toggle.flipped，结果 hover 和 click 行为互相打架 - 移动端没有 hover，纯
:hover的翻转在 iOS 上点一下才触发，再点一下才恢复，体验断裂 - 用
transform: rotateY(180deg)初始化背面时，忘了同时设backface-visibility: hidden，导致初始状态就显示背面
实操建议：
- hover 场景：直接用
.card-container:hover .card控制变换 - click 场景：用
.card.is-flipped类，JS 只负责增删这个类，CSS 全权处理动画 - 兼顾响应式：对触摸设备加
@media (hover: none)回退为 click 触发
perspective 值太小会让翻转变形，太大又没立体感
这不是一个“越大越好”的值。perspective: 1000px 是经验起点，但实际要看卡片尺寸和页面密度。
性能与兼容性影响：
- 值低于 300px：翻转像被拉长的纸片，边缘扭曲明显（尤其大卡片）
- 值高于 2000px：几乎看不出深度，退化为平面旋转
- IE11 不支持
perspective在非定位元素上生效，必须给容器加position: relative
调试技巧：
- 先设
perspective: 800px，卡片宽高比接近 3:2 时通常自然 - 卡片越“厚”（视觉上纵深强），
perspective值越要调小（如 400–600px） - 多个翻转卡片共存时，统一用外层容器设
perspective，别每个都设，避免透视冲突
backface-visibility 和 transform-origin 的组合稍有偏差，就会出现点击失灵或文字倒置。 
