如何利用CSS盒模型实现卡片翻转效果_设置backface-visibility与transform-style

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)，其余不动。