perspective 属性必须作用于父容器而非卡片本身，且需配合 transform-style: preserve-3d 和 backface-visibility: hidden 才能实现自然3D翻转；移动端需用JS监听touchstart并添加.is-flipped类。
perspective 属性必须作用在父容器上，不是卡片本身
很多人一上来就给 .card 加 perspective: 1000px，结果翻转完全没 3D 感——因为 perspective 不是给要变形的元素加的，而是给它的**最近的、有变换子元素的祖先容器**加的。它定义的是“你站在哪看这个 3D 场景”，所以得套在包裹卡片的容器（比如 .card-container）上。
常见错误现象：transform: rotateY(180deg) 只有平面翻页感，像纸片抽动，没有纵深弧线。
-
perspective值越小（如500px），3D 感越强、近大远小越明显；值越大（如2000px），越接近平面旋转 - 不要和
transform: perspective()混用——后者是 transform 函数，只影响单个元素，且优先级低、兼容性差 - 父容器需设
transform-style: preserve-3d，否则子元素的 3D 位置会被压平到父容器平面
卡片正反面必须用 transform-style: preserve-3d + 定位分离
单纯两个 div 叠一起，不加 3D 上下文，翻转时背面会“消失”或显示为黑块——浏览器默认把子元素渲染在同一个平面，背面不可见。
使用场景：正面展示标题+缩略图，背面放描述+按钮，用户 hover 时翻转可见。
立即学习“前端免费学习笔记（深入）”；
- 正反面元素（如
.card-front和.card-back）必须是同一父容器的直接子元素 - 父容器（即带
perspective的那个）必须设transform-style: preserve-3d - 背面元素需加
transform: rotateY(180deg)初始化朝向，否则翻转后内容是镜像的 - 推荐用
backface-visibility: hidden加在正反面元素上，避免翻转中途出现双面重叠闪烁
transition 要写在触发翻转的容器上，而非单个面
如果只给 .card-front 加 transition: transform 0.6s，那么翻转开始时正面动了，但背面没声明 transition，就会突兀跳变——动画不同步。
正确做法是把过渡控制权交给父容器，靠 class 切换驱动整体状态变化。
- 在父容器（如
.card-container）上写transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1) - hover 或点击时，给该容器加 class（如
.is-flipped），并设transform: rotateY(180deg) - 不要用
animation替代transition——除非你需要循环/多关键帧，否则过渡更轻量、更可控
移动端 touch 事件需额外处理，hover 不生效
iOS Safari 和 Android Chrome 在非可点击元素上默认不触发 :hover，导致卡片在手机上点不动。这不是 CSS 问题，是交互模型差异。
性能影响：过度使用 will-change: transform 可能引发不必要的图层提升，尤其卡片多时内存占用上升。
- 给卡片容器加
cursor: pointer并确保其tabindex="0"，让 iOS 认为它是可交互元素 - 用 JavaScript 监听
click或touchstart，切换.is-flipped类，比纯 CSS 更可靠 - 若用 JS 控制，记得在翻转结束时加
transform: translateZ(0)强制硬件加速，避免某些安卓机型卡顿
perspective 放错位置、preserve-3d 漏写、或移动端缺少交互钩子这三个点上。其他都是微调。 
