怎样在CSS中借助自定义属性实现卡片翻转3D透视-css教程-PHP中文网

transform-style: preserve-3d 是实现 3d 翻转的前提，必须设在翻转容器（如 .card）上以维持子元素的三维空间关系；配合 perspective、--rotate-y 变量和 backface-visibility: hidden 才能正确驱动翻转动画。

怎样在css中借助自定义属性实现卡片翻转3d透视

为什么 `transform-style: preserve-3d` 是翻转前提

没有它，子元素的 3D 变换会“压平”到父容器平面，卡片正面和背面永远共面，翻转就只是二维缩放或位移。浏览器默认是 transform-style: flat，必须显式设为 preserve-3d 才能让 rotateY 等真正按三维空间计算。

这个属性要加在翻转的容器上（比如卡片外壳 .card），而不是单个面。常见错误是只给 .card__front 或 .card__back 加，结果无效。

transform-style: preserve-3d 必须作用于有子元素参与 3D 变换的直接父级
父级若设置了 overflow: hidden，可能裁剪出 3D 空间外的背面内容，需配合 perspective 和足够大的容器尺寸
不要在 body 或全局根元素滥用该属性，它会影响渲染性能

用 `--perspective` 自定义属性控制景深

透视距离决定翻转的“立体感”强弱：值越小（如 500px），翻转越夸张；越大（如 2000px），越接近平面旋转。硬编码在 CSS 里改起来麻烦，用自定义属性就能动态调整：

.card {
  --perspective: 1200px;
  perspective: var(--perspective);
}

这样后续只需修改 --perspective 值，整个卡片组的透视效果同步更新。注意：perspective 要设在翻转容器（.card）上，不是 :root —— 否则所有后代都受同一透视影响，容易错乱。

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

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

下载

不能把 perspective 和 perspective-origin 混用；后者仅影响透视“消失点”位置，非必需
如果卡片尺寸变化频繁，--perspective 建议用 px 或 rem，避免用 % 导致不可预期缩放
某些旧版 Safari 对小于 600px 的 perspective 值渲染异常，建议下限设为 700px

正反面如何用 `--rotate-y` 驱动翻转动画

把翻转角度抽成变量，能统一控制状态、支持 JS 切换、也方便做 hover / click 多种触发方式：

.card {
  --rotate-y: 0deg;
  transform: rotateY(var(--rotate-y));
}

.card.is-flipped {
  --rotate-y: 180deg;
}

.card__front {
  transform: rotateY(0deg);
}

.card__back {
  transform: rotateY(180deg);
}

关键点在于：正面始终 rotateY(0)，背面始终 rotateY(180deg)，而容器整体绕 Y 轴旋转，让两面在 3D 空间中自然切换可见性。不要试图对正反面分别做 rotateY 动画 —— 那会破坏 preserve-3d 的空间一致性。

动画应加在 .card 上，用 transition: transform 0.4s ease，别加在正反面元素上
为防止背面在未翻转时“透出”，给 .card__back 加 backface-visibility: hidden
若用 JS 控制，直接操作 element.style.setProperty('--rotate-y', '180deg') 即可，无需 class 切换