transform: rotateY(180deg) 没反应的主因是父容器未开启3D渲染上下文，需在直接包裹前后两面的容器上设置 transform-style: preserve-3d 和足够大的 perspective（800px–1200px），且前后两面须设 position: absolute、top: 0; left: 0; 及 backface-visibility: hidden。
为什么 transform: rotateY(180deg) 没反应？
常见原因是父容器没开启 3D 渲染上下文。CSS 的 3D 变换（比如 rotateY）默认在平面中计算，不触发真实空间旋转。必须给翻转容器的父级加 transform-style: preserve-3d，且该父级自身需有 perspective（直接写在父元素上，或用伪类/包装层）。
容易漏掉的点：
-
perspective值太小（如10px）会导致翻转像“贴脸晃动”，建议800px–1200px范围 -
preserve-3d必须设在**直接包裹前后两面的容器**上，不是最外层 wrapper 就失效 - 前后两面（front/back）需设
position: absolute且top: 0; left: 0;，否则会错位
backface-visibility: hidden 是干啥的？
它控制元素背面是否可见。不加这句，翻转到 90° 时前后两面会同时显示（出现重影），180° 后背面内容还会镜像显示——这不是我们想要的“卡片”效果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 前后两个面（
.front和.back）都必须单独设置backface-visibility: hidden - 不能只写在父容器上，无效
- 某些旧版 Safari 需要加
-webkit-backface-visibility: hidden兼容
怎么让鼠标悬停就翻转，而不是靠 JS 控制？
纯 CSS 实现的关键是：把 transform: rotateY(180deg) 写在 hover 状态里，并确保初始状态是 rotateY(0)。但要注意过渡必须加在「可变换的元素本身」上，不是父容器。
典型结构和关键样式：
.card {
perspective: 1000px;
}
.card-inner {
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.front, .back {
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg); /* 初始背面朝内 */
}注意：.back 的初始 rotateY(180deg) 是让它“预先翻过去”，这样翻转动画才自然；如果只靠 hover 从 0→180，背面会先正着转半圈再翻，视觉错乱。
移动端点击翻转为啥不灵敏？
因为 :hover 在触摸设备上不可靠（部分 Android 触发延迟，iOS 可能根本不触发）。必须补 JS 逻辑，但别全重写——推荐最小侵入式切换 class：
- 监听
click或touchstart，给卡片加is-flipped类 - CSS 中用
.card.is-flipped .card-inner { transform: rotateY(180deg); }替代 hover - 为避免连点多次翻乱，可用
classList.toggle()+pointer-events: none临时禁用（翻转动画中加）
真正麻烦的不是翻转本身，而是 perspective 深度感在不同屏幕宽度下表现差异大——小屏需调低 perspective 值，否则翻转弧度太夸张；这点常被忽略，只能靠媒体查询微调。
