backface-visibility: hidden 必须同时加在前后两面元素上，否则翻转时会出现背面镜像、文字透出或双面显示；transform-style: preserve-3d 需设在直接包裹两面的父容器上；perspective 必须设在该父容器且用 px 单位；rotatey 初始化需预设 0deg/180deg 和相同 translatez。
backface-visibility: hidden 必须加在前后两面，不是可选而是强制
翻转时看到背面镜像、文字透出、或两面同时显示，90% 是因为漏写了 backface-visibility: hidden。它不控制“是否渲染”，而是告诉浏览器：“当这个面背对镜头时，请彻底不绘制它”。
常见错误：
- 只给
.back加，忘了.front也需要——因为翻转后.front就变成背面了 - 写在父容器（如
.card）上，但该属性**只对自身生效**，子元素必须单独声明 - 用
opacity: 0或visibility: hidden替代，这会破坏 3D 渲染流，导致翻转错位或消失
正确写法：.card__front, .card__back { backface-visibility: hidden; }
transform-style: preserve-3d 必须设在翻转容器，不是卡片本身
很多人把 transform-style: preserve-3d 写在 .card 上，结果动画还是扁平的——问题在于：这个属性要作用在**包含前后两面的直接父容器**上，也就是那个包裹 .front 和 .back 的盒子（常叫 .card-inner 或 .card-wrapper）。
原因很简单：preserve-3d 的作用是让它的子元素“保有各自 Z 轴位置”，如果写在最外层 .card，而 .front/.back 实际是孙子节点，那中间一层默认仍是 flat，子元素就被拍平了。
关键点：
- 不能设在
body或.card-container这类更外层容器（除非它直接包着两面） - 不能和
overflow: hidden共存——3D 元素可能轻微溢出，被裁掉就翻一半卡住 - 不要对这个容器本身做位移动画（比如
translateX+rotateY同时动），容易触发 Safari 渲染异常
perspective 值太小或太大都会让翻转失效
perspective 不是装饰属性，它决定 3D 空间的“景深单位”。值设错，rotateY 就没立体感，甚至背面完全不可见。
典型问题现象：
- 翻转到 90° 就黑屏或消失 →
perspective太小（如100px），背面已超出视锥体 - 翻转像在平面旋转贴纸 →
perspective太大（如5000px），Z 轴差异被压缩，失去纵深 - 移动端 Safari 无反应 →
perspective没写在父容器，而是写在了.card自身上
实操建议：
- 桌面端推荐
perspective: 800px ~ 1200px；移动端可略调大（1400px），避免小屏畸变 - 必须写在
.front/.back的**共同父容器**上，不是.card就是.card-container，看结构定 - 别用
%或em，只接受px、rem等绝对长度单位
rotateY(180deg) 的初始状态必须预设，不能靠动画驱动
很多人写 .back { animation: flip 0.6s forwards; }，结果页面一加载背面就闪一下——因为没设初始态。CSS 3D 翻转要求：两面从一开始就在 3D 空间里对齐，而不是靠动画“推”过去。
正确初始化方式：
.front { transform: rotateY(0deg) translateZ(60px); }.back { transform: rotateY(180deg) translateZ(60px); }
注意：
-
translateZ值相同（比如都是60px），不是一正一负——这是为了保证两面在同一个 Z 基准上，靠旋转区分朝向 - 别用
z-index控制前后，3D 下它完全无效 - 不要给
.back设display: none，这会让它退出渲染树，preserve-3d失效
真正触发翻转的，只是改 .card-inner 的 transform: rotateY(180deg)，其余不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
