卡片翻转需三层结构、perspective设于父容器、transform-style: preserve-3d与backface-visibility: hidden缺一不可，且.card-back须预设rotatey(180deg)，否则出现消失、闪烁或镜像。
直接给结论：卡片翻转不是加个 rotateY(180deg) 就能动，核心是三层结构 + 两个必填样式 + 触发逻辑，漏掉任意一项都会出现背面消失、闪烁、错位或纯2D翻转。
perspective 必须写在父容器上，不能塞进 transform
很多人把 perspective: 1000px 直接加在卡片元素（如 .card）的 transform 里，比如写成 transform: perspective(1000px) rotateY(180deg)——这语法无效，浏览器直接忽略 perspective，结果就是左右镜像式平转，毫无立体感。
-
perspective是独立 CSS 属性，必须作用于**子元素的共同父容器**（如.card-container），为前后两面提供共享的 3D 渲染上下文 - 推荐值范围：600px–1200px；太小（如 300px）背面缩成一条线，太大（如 3000px）接近无透视
- 如果父容器本身有
overflow: hidden或transform: translateZ(0)，可能截断 3D 渲染层，导致翻转卡顿或半截消失
transform-style: preserve-3d 和 backface-visibility: hidden 缺一不可
没加 transform-style: preserve-3d，.card-front 和 .card-back 的 3D 变换会被浏览器“拍平”成 2D，rotateY(180deg) 只是左右翻面；不加 backface-visibility: hidden，翻转到 90° 左右时正反面会同时显示、文字镜像、内容重叠甚至闪烁。
-
transform-style: preserve-3d必须设在包裹前后两面的**直接父容器**上（通常是.card或.card-inner），不是最外层.card-container，也不是.card-face子元素 -
backface-visibility: hidden必须分别加在.card-front和.card-back上——加在.card上无效，该属性只对直系子元素生效 - 旧版 Safari（尤其是 15.4 之前）需要补
-webkit-backface-visibility: hidden，否则背面可能完全不渲染
.card-back 必须预设 transform: rotateY(180deg)
翻转动画的本质是让正面转过去、背面转过来。如果只在 hover 时给容器加 rotateY(180deg)，而背面没初始化朝后，翻转后看到的就是正面的镜像，或者背面文字反着读。
-
.card-back初始状态必须带transform: rotateY(180deg)，让它默认就背对用户 - 前后两面都要设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则翻转时位置错乱 - 移动端真机上
:hover基本不可靠，得用 JS 切换类（如.is-flipped），再配合.card.is-flipped { transform: rotateY(180deg); }
transition 要写在翻转容器上，别写在子元素里
如果把 transition: transform 0.6s 写在 .card-front 上，只有正面动；写在 .card 上，整个 3D 容器才平滑旋转。Safari 对硬件加速更敏感，建议加 transform: translateZ(0) 或 will-change: transform 防卡顿（但注意：旧 Safari 上 will-change 反而可能出问题）。
- 推荐过渡写法：
.card { transition: transform 0.6s cubic-bezier(0.25, 0.75, 0.5, 1); } - 触发方式：
.card:hover { transform: rotateY(180deg); }，或 JS 中用element.classList.toggle('is-flipped') - 移动端需补
@media (hover: hover)判断，并加touch-action: manipulation防误触
最容易被忽略的是：perspective 和 transform-style 必须配对出现，且层级不能错；backface-visibility 不是可选项，而是防闪烁的刚需；背面不预旋转，翻过去就是镜像——这些点只要漏一个，效果就废一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
