rotateY(180deg)没反应的主因是父容器未开启3D上下文：需在直接父元素设transform-style: preserve-3d并配perspective（建议600–1200px），.front/.back须absolute定位且加backface-visibility: hidden，移动端须用JS click替代hover。
为什么 transform: rotateY(180deg) 没反应？
常见原因是父容器没开启 3D 渲染上下文。CSS 的 3D 变换（如 rotateX、rotateY）默认在 2D 平面生效，不触发真实空间翻转。必须给翻转容器的**直接父元素**加 transform-style: preserve-3d，且该父元素自身最好有 perspective（比如 perspective: 1000px）。漏掉其中任意一个，rotateY 就只会“平移式伪翻转”，看不到背面。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
perspective写在卡片容器（如.card）上，别写在 body 或全局；值太小（如 100px）会畸变，太大（如 5000px）翻转感弱，建议 600–1200px 区间试调 -
transform-style: preserve-3d必须作用于翻转动画的**直接父容器**，不是最外层 wrapper，也不是 .front/.back 子元素 - 确保
.front和.back都设了position: absolute且top: 0; left: 0; width: 100%; height: 100%，否则翻转时位置错乱
backface-visibility: hidden 什么时候必须加？
不加的话，翻转到 90° 左右时，正面和背面会同时显示（尤其在 Safari 和旧版 Chrome），像两张纸叠在一起。这不是 bug，是浏览器默认渲染背面内容导致的视觉重叠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.front和.back都加上backface-visibility: hidden，缺一不可 - 它不影响 3D 空间位置，只控制“当元素背对镜头时是否绘制”，加了才干净
- 某些安卓 WebView（如微信内置浏览器）对这个属性更敏感，漏掉就大概率花屏
用 transition 还是 @keyframes 做翻转？
绝大多数场景用 transition 更稳妥。因为翻转本质是状态切换（hover / click 切换 transform 值），而非循环动画。@keyframes 容易因 timing-function 或 iteration-count 控制不当，导致卡顿或意外回弹。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器（如
.card）加transition: transform 0.6s cubic-bezier(0.5, 0, 0.5, 1)，比默认ease更顺滑 - hover 时只改
.card的transform: rotateY(180deg)，不要在.front/.back上单独加 transition - 如果需要点击切换（非 hover），用 JS 切换一个 class（如
.is-flipped），CSS 里写.card.is-flipped { transform: rotateY(180deg); }
移动端点击翻转失效？
iOS Safari 和部分安卓浏览器默认不触发 :hover，且 click 在无 cursor: pointer 或未绑定事件的元素上可能不冒泡。单纯靠 CSS :hover 在手机端基本不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 为卡片加
cursor: pointer（提升可点击感知），并用 JS 绑定click或touchstart - 避免用
ontouchstart+onmouseover混合判断，直接统一用addEventListener('click', ...)即可兼容大部分设备 - 若需支持双击翻回，记录当前状态（如用
dataset.flipped = "true"），而不是依赖 CSS 类名 toggle 的副作用
真正麻烦的从来不是 rotateY 本身，而是 perspective 层级嵌套错一层、backface-visibility 少写一个、或者移动端把 hover 当真——这些点卡住时，查半天 DOM 结构才发现父元素少了个 transform-style。
