要实现 hover 触发的 3d 翻转，必须在卡片容器（如 .card）上设置 transform-style: preserve-3d 和 perspective；正反面需用 position: absolute + top/left: 0 对齐，并均设置 backface-visibility: hidden；rotatey(180deg) 需配合 transform-origin 控制轴心；transition 必须写在默认状态而非 :hover 中，且优先使用 transform 和 opacity。
hover 触发 3D 翻转必须开启 preserve-3d
直接写 :hover { transform: rotateY(180deg); } 不会翻转，只会平面旋转——因为父容器默认是扁平渲染的。关键在卡片容器（比如 .card）上加 transform-style: preserve-3d;，告诉浏览器：“这里面的子元素要按 3D 空间计算”。否则子元素即使有 transform: rotateY，也会被拍平到 Z=0 平面。
常见错误是只给翻转元素（如背面）设 transform，却忘了给它的父容器设 transform-style。另外，父容器还得有 perspective（建议 1000px～2000px），否则 3D 感弱、边缘变形失真。
卡片正反面需用 position: absolute + backface-visibility: hidden
正反两层（.card-front 和 .card-back）必须叠在同一位置，靠 position: absolute + top/left: 0 对齐，不能用 margin 或 flex 推挤，否则翻转时会错位。
backface-visibility: hidden 必须分别加在正反两面上，否则翻转到 90° 时会出现“双面同时可见”或闪烁。它不是可选优化项，是 3D 翻转的硬性要求。
注意：不要只给背面加这个属性，正面也得加——否则翻转后正面会从背面“透出来”。
rotateY(180deg) 要配合 transform-origin 控制翻转轴心
默认 transform-origin 是 50% 50%（中心点），对卡片翻转来说刚好；但如果你的卡片宽高不一致、或想实现“沿左边缘翻转”效果，就得显式设置，比如：
-
transform-origin: left center;→ 左侧为轴心，像书本向右翻开 -
transform-origin: top center;→ 顶部为轴心，类似抽屉向上掀开
没设 transform-origin 也能动，但一旦卡片尺寸变化或嵌套层级变深，轴心偏移会导致翻转“歪斜”，尤其在移动端缩放后更明显。
transition 一定要加在非 hover 的基础状态上
把 transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); 写在 .card 默认样式里，而不是只写在 :hover 中。否则鼠标移入有动画，移出时会瞬间跳回原位。
性能上，优先用 transform 和 opacity 做过渡属性，避免触发布局（layout）或绘制（paint）。别加 height、margin 或 background-color 过渡——它们会强制重排重绘，导致卡顿，尤其在低端安卓机上。
如果翻转后内容文字模糊，大概率是没启用硬件加速，可以加 transform: translateZ(0); 到翻转元素上（但别滥用，只在必要时加）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
