CSS Grid 负责布局定位，transform: rotate() 负责角度旋转，二者需分层处理：网格容器设 perspective，卡片设 transform-style: preserve-3d 和预旋转，背面需 backface-visibility: hidden 防重叠。
直接说结论：CSS Grid 负责排位置，transform: rotate() 负责转角度，二者不冲突但必须分层处理——网格容器管布局，卡片内部管旋转，混在一起就翻车。
grid-container 和 card 必须分离 3D 空间
常见错误是给 .grid-container 加 transform-style: preserve-3d，结果整行卡片一起歪。正确做法是只在单个卡片上启用 3D 上下文：
-
.card必须设position: relative和transform-style: preserve-3d -
.grid-container只负责display: grid和perspective: 1000px（提供观察距离） - 如果漏掉
perspective，rotateY()会变成平面翻转，没有纵深感
card-front / card-back 的初始状态要手动设好
很多人以为 hover 时 rotate 180° 就完事了，但背面内容默认是正向的，翻过去会镜像显示。必须提前把背面「预旋转」：
-
.card-back初始加transform: rotateY(180deg) -
.card-inner（包裹 front/back 的容器）设transform-style: preserve-3d -
.card-front和.card-back都要设backface-visibility: hidden，否则翻转中途两面会同时可见
auto-fit + minmax 在旋转卡片里容易撑破容器
用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 是响应式好手，但配合旋转后，浏览器计算宽度时可能忽略 transform 导致换行错乱：
立即学习“前端免费学习笔记（深入）”；
- 解决办法：给
.card加width: 100%，强制它严格按网格轨道宽度收缩 - 如果卡片内有图片或文字溢出，记得加
overflow: hidden在.card-inner上 - 移动端点击翻转时，别依赖
:hover，要用 JS 切换flipped类，否则 iOS Safari 不触发
rotateY 与 rotateX 的视觉差异很实际
悬停翻转常用 rotateY(180deg)，但有时需要上下翻（比如日历翻页）：
-
rotateY：绕垂直轴转，适合左右翻，正面→背面自然过渡 -
rotateX：绕水平轴转，适合上下翻，但要注意perspective值太小会显得「顶天立地」，建议至少800px - 别混用
rotateY和rotateX在同一个 transition 里，动画轨迹会不可控
最易被忽略的是 backface-visibility: hidden —— 它不是可选装饰，而是防止两面内容在翻转中重叠的硬性开关；一旦漏掉，PC 和移动端都会出现视觉撕裂。
