翻转卡片正反面定位出问题，90%因position: absolute未配对position: relative或backface-visibility: hidden只加一面；必须正反面均设absolute全尺寸定位且共用backface-visibility: hidden，父容器设relative并具明确宽高，perspective须在翻转容器父级、preserve-3d须在直接包裹正反面的容器上。
翻转卡片的正反面定位出问题，90% 是因为 position: absolute 没配对 position: relative，或者 backface-visibility: hidden 只加了一面。
为什么正面和背面必须都用 absolute 定位
不这么做，两层内容会按文档流堆叠，翻转时高度塌陷、错位、互相挤压。absolute 是唯一能保证正反面严格重叠、互不干扰的定位方式。
-
.front和.back必须共用position: absolute; top: 0; left: 0; width: 100%; height: 100% - 包裹它们的父容器（比如
.card-inner）必须设position: relative，否则 absolute 会相对于视口定位，多个卡片全叠在左上角 - 如果父容器是 grid 或 flex 子项，别在它上面写
top/left—— 改用place-self或justify-self调整位置
backface-visibility: hidden 必须写在正反两面
这个属性控制的是「元素自身背面是否渲染」，不是「当前哪一面朝前」。只加在 .back 上，.front 在旋转到 90° 左右时，它的背面就会透出来，Chrome/Safari 下尤其明显——你会看到文字镜像、闪烁、甚至双层重影。
- 必须写成
.front, .back { backface-visibility: hidden; } - 不能只写
.back { backface-visibility: hidden; } - 该属性不继承，父级设置无效
perspective 和 transform-style 的位置不能颠倒
perspective 写在翻转容器自己身上，或写在正反面元素上，都会导致 3D 空间失效——浏览器直接把 rotateY 当成 2D 处理，背面要么消失，要么坐标错乱飘走。
立即学习“前端免费学习笔记（深入）”；
-
perspective必须加在「翻转容器的父级」，例如结构是.grid → .card → .front/.back，那perspective: 800px得写在.grid上 -
transform-style: preserve-3d必须加在「实际执行翻转的容器」上，也就是直接包着.front和.back的那个元素（通常是.card） - 推荐 perspective 值：小卡片用 300–600px，常规尺寸用 800–1000px；超过 1200px 就几乎看不出 3D 感了
背面内容显示镜像？那是初始 transform 写错了
很多人的 .back 初始设 transform: rotateY(180deg)，结果 hover 时整个背面图像水平翻转一次，像照镜子。这不是 bug，是逻辑没模拟真实翻转。
- 正确初始状态：
.front { transform: rotateY(0deg); }，.back { transform: rotateY(-180deg); } - hover 时：
.card:hover .front { transform: rotateY(180deg); }，.card:hover .back { transform: rotateY(0deg); } - 这样正反面同步转动，背面内容始终正向，无镜像感
最常被忽略的一点：absolute 定位的父容器如果没有明确宽高，子元素会塌成 0×0——哪怕你写了 width: 100%，它也没东西可百分比。所以 .card 或 .card-inner 至少得有 width，高度要么由内容撑开，要么显式设定。
