perspective必须加在.card的父容器（如.card-container）上，而非.card本身；漏掉transform-style:preserve-3d或backface-visibility:hidden会导致翻转塌陷、背面透底、safari全黑。

直接说结论：perspective 必须加在 .card 的父容器（如 .card-container）上，而不是 .card 本身；漏掉 transform-style: preserve-3d 或 backface-visibility: hidden，翻转一半就会塌陷、背面透底、Safari 全黑。

perspective 为什么不能写在 .card 上

perspective 定义的是“观察者到 Z=0 平面的距离”，它为子元素创建共享的 3D 渲染上下文。写在 .card 上，等于让每张卡片各自拥有一个独立透视原点，悬停时旋转轴不一致，视觉上会抖动、错位、边缘拉伸变形。

• 正确写法：.card-container { perspective: 1000px; }（推荐值范围：600px–1200px）
• 错误写法：.card { perspective: 1000px; }——浏览器忽略该声明，退化为平面旋转
• 值太小（如 300px）会导致翻转中明显畸变；太大（如 3000px）则几乎看不出深度，像幻灯片切换
• 别用 transform: perspective(1000px)，这是无效语法；perspective 是独立 CSS 属性

transform-style: preserve-3d 必须设在 .card 上

这个属性的作用是告诉浏览器：“别把 .card-front 和 .card-back 压平到同一个 Z=0 平面”。它只对直系子元素生效，且无法被祖先继承。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 正确：.card { transform-style: preserve-3d; }（.card 直接包裹正反两面）
• ❌ 错误：.card-container { transform-style: preserve-3d; }——.card 自身没开启 3D 上下文，子元素仍被拍平
• .card 不能有 overflow: hidden，否则会裁剪翻转到 90° 时伸出的侧面
• 旧版 Safari（iOS 15.4 之前）需补 -webkit-transform-style: preserve-3d

backface-visibility: hidden 必须分别加在正反两面上

不加这句，翻转到 90° 左右时，正面和背面会同时渲染，文字镜像重叠、颜色混叠，Safari 下甚至全黑或闪烁。这不是 bug，是浏览器默认绘制背面纹理的行为。

• 必须写在 .card-front 和 .card-back 上，不是 .card 或容器
• 两面都要设：.card-front, .card-back { backface-visibility: hidden; }
• 旧版 Safari 需补 -webkit-backface-visibility: hidden
• 背面元素初始必须显式旋转：.card-back { transform: rotateY(180deg); }，否则翻转后内容方向反了

移动端点击翻转失效？别依赖 :hover

iOS Safari 对 :hover 的支持是“伪悬停”：点一下延迟 300ms 才触发，松手立刻回弹。纯 CSS 悬停在触屏设备上基本不可靠。

• ✅ 可行解：:focus-within + tabindex="0"，兼容 iOS 13+/Chrome 84+，无需 JS
• ❌ 别用 :active——只在按下的瞬间生效，体验断裂
• 真要稳定控制（如双击翻回、手势、旧版兼容），必须用 JS 切换 class：element.classList.toggle('is-flipped')
• 确保 .card 有 cursor: pointer 和 touch-action: manipulation，避免滚动冲突

最常被忽略的其实是 DOM 层级干扰：只要 .card 的任意祖先元素设置了 overflow: hidden 或任何 transform（哪怕只是 translateZ(0)），都可能截断 3D 渲染层，导致翻转卡在半途或背面消失——得一层层检查父级样式。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！