必须将 perspective 设在卡片父容器（如 .card-container）上，值取 800–1200px；子元素需设 transform-style: preserve-3d 和 backface-visibility: hidden，并显式声明 rotatey(0deg) 起始态。
perspective 必须加在父容器上，不是卡片本身
直接给要翻转的 .card 加 perspective: 1000px 是无效的。浏览器会忽略它，因为 perspective 不是作用于自身，而是为**子元素**创建共享的 3D 观察空间。每个卡片单独设 perspective，就等于各自建了个微型镜头，悬停时旋转轴错位、抖动、边缘畸变全来了。
正确做法是把 perspective 放在卡片的直接父容器上，比如：
.card-container {<br> perspective: 1000px;<br>}
- 值选
800px–1200px比较稳妥：太小（如300px）透视感过强，翻转到 90° 左右容易“消失”；太大（如3000px）就接近平面旋转，失去 3D 感 - 别写成
transform: perspective(1000px)—— 这是无效语法，perspective是独立 CSS 属性，不是transform函数 - IE 10+ 和 Edge 12+ 原生支持，但旧版 Safari 需加
-webkit-perspective
rotateY() 不是独立函数，必须配合 preserve-3d
写 transform: rotateY(180deg) 却没反应？不是拼错了，是浏览器根本没开启 3D 渲染上下文。CSS 中没有原生 rotateY() 函数，它是 rotate3d(0, 1, 0, 180deg) 的简写，只在 3D 空间中生效。
关键一步：在翻转容器（比如 .card-inner）上必须声明：
.card-inner {<br> transform-style: preserve-3d;<br>}
- 漏掉
transform-style: preserve-3d，所有 z 轴变换（包括rotateY）都会被扁平化，变成“原地转圈” - 父容器不能有
overflow: hidden，否则会剪裁 3D 空间中翻转过程中的中间帧，导致卡顿或半截效果 - 移动端 Safari 对
preserve-3d支持不稳定，建议同时加backface-visibility: hidden和will-change: transform提前触发硬件加速
backface-visibility: hidden 不是可选项，是必填项
悬停后卡片“突然消失”或“只闪一下”，大概率是背面被默认隐藏了。CSS 默认对所有元素启用 backface-visibility: hidden，防止 3D 变换中背面内容意外透出 —— 但它也导致翻转到 180° 后正面不可见、背面又没显示出来。
解决方案不是全局设 visible，而是精准控制：
- 给参与翻转的每一面（
.card-front和.card-back）都加上backface-visibility: hidden - 正面初始旋转
transform: rotateY(0deg)，背面初始旋转transform: rotateY(180deg) - 用外层容器（
.card-inner）统一控制翻转：transform: rotateY(180deg)，这样正面转走、背面转进，视觉就是完整翻页 - 别在
@keyframes里写rotateY(180)（缺单位），现代浏览器（Chrome 115+ / Safari 17+）已拒绝解析，必须写rotateY(180deg)
transition 动不起来？检查 transform 初始值和 GPU 加速
写了 transition: transform 0.6s 却毫无动画，常见原因是初始 transform 值不明确。浏览器无法对 none 和 rotateY(180deg) 做插值 —— none 是关键字，不是数值类型。
必须显式定义起始态：
-
.card-inner { transform: rotateY(0deg); }，而不是留空或写transform: none - 避免混用多个变换（如同时改
scale和rotateY），除非你清楚复合顺序；优先用单一rotateY+translateZ(0)触发 GPU 加速 - Safari 尤其吃这套：
transform: rotateY(0deg) translateZ(0)比纯rotateY(0deg)更稳 - 别对
perspective做 transition —— 它不支持动画，写transition: perspective 0.3s完全无效
最易被忽略的一点：翻转后文字镜像颠倒。这不是 bug，是 3D 空间真实表现。解决方法不是靠 JS 修正，而是结构上分层 —— 外层翻转，内层正面/背面各自用 transform: rotateY(180deg) 抵消方向，或者干脆只让背面内容自带反向排版。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
