卡片翻转需三层设置：外层设perspective创建3D上下文，翻转容器加transform-style:preserve-3d，正反面均设backface-visibility:hidden并预置rotateY(0deg)/rotateY(180deg)。
直接给卡片加 transform: rotateY(180deg) 是翻不起来的——缺了 3D 渲染上下文，背面根本不会“转出来”，只会消失或错位。
perspective 必须设在外层容器上
不是加在翻转元素本身，而是它的父级。比如卡片结构是 perspective 要写在 .card 上：
-
perspective: 1000px是常用值，太小（如200px）会让翻转畸变严重，太大（如5000px）则立体感弱 - 不能写成
transform: perspective(1000px)—— 这个函数只对transform生效，不创建渲染上下文 - 移动端 Safari 对
perspective值敏感，低于600px容易触发渲染抖动
transform-style: preserve-3d 是翻转容器的强制要求
它必须加在执行旋转的那个元素上（通常是 .card-inner），而不是外层或正反面：
- 不加这句，子元素（正面/背面）会被压平到 2D 平面，
rotateY就只是左右拉伸，不是翻转 - 加了但父级没设
perspective，动画会“动”，但视觉上像抽搐——因为没有景深参考系 - 别把它和
transform: translateZ()混用：除非真要偏移 Z 轴，否则多余操作反而增加重绘开销
backface-visibility: hidden 不是可选项，是保底项
正反两面都得加，漏一个就会出问题：
- 不加时，翻转到 90° 左右，你会看到背面内容“镜像透出”（尤其在 Chrome 和 Safari 下明显）
- 只给正面加、背面不加？背面在翻转过程中会显示原始方向的文字，看起来像被“印反”了
- 某些旧版 Android WebView 需要额外补
-webkit-backface-visibility: hidden - 别用
display: none或visibility: hidden控制显隐——这会让元素退出 3D 空间，翻转直接失效
正面和背面的初始 transform 必须预设到位
不是靠动画从 0deg 动到 180deg 才让背面出现，而是背面一开始就要“背对镜头”：
.front { transform: rotateY(0deg); }.back { transform: rotateY(180deg); }- 如果背面也写
0deg，那它初始就和正面重叠，且因backface-visibility: hidden被隐藏，等于白写了 - 想让背面文字正向显示？在
.back内部再包一层元素，单独加transform: rotateY(180deg)校正，或者直接用transform: rotateY(180deg) scaleX(-1)
最易忽略的其实是「谁在动」：翻转动作必须作用在包裹正反面的容器上，而不是分别动两个面。一旦把 animation 或 transform 错加到 .front 或 .back 上，整个 3D 关系就崩了——这时候删掉所有动画，先确保静止状态下正反面能正确叠放，再加动效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
