Firefox中preserve-3d失效：CSS翻硬币动画图片不显示问题

问题说明 #

用纯CSS和HTML实现的翻硬币动画在Chrome浏览器中运行正常，但在Firefox浏览器中，硬币旋转过程中其中一张图片无法显示。

问题原因 #

• 第二个硬币面的容器类名拼写错误：h-ful应为h-full，容器高度异常导致图片无法正常渲染
• 仅给一个面设置了backface-visibility: hidden，Firefox对3D变换的背面隐藏逻辑要求两个面都明确配置该属性
• 父元素的3D变换上下文在Firefox中需要子元素的属性配置更明确才能生效

修复方案 #

1. 修正HTML类名拼写错误 #

将第二个面的className="absolute w-full h-ful"改为className="absolute w-full h-full"，确保容器尺寸正确。

2. 统一配置两个面的backface-visibility #

为两个硬币面的容器都添加backfaceVisibility: "hidden"属性，让Firefox正确处理3D变换中的背面隐藏。

3. 优化CSS动画（可选） #

移除冗余的浏览器前缀（现代主流浏览器已支持标准animation属性），统一动画时序函数写法。

修复后的完整代码 #

CSS代码 #

.coinflip-playerOne {
  animation: flipHeads 3.5s linear forwards;
}

.coinflip-playerTwo {
  animation: flipTails 3.5s linear forwards;
}

@keyframes flipHeads {
  0% {
    transform: none;
  }
  50% {
    transform: scale(1.5) rotateY(1080deg);
  }
  100% {
    transform: scale(0.9) rotateY(1980deg);
  }
}

@keyframes flipTails {
  0% {
    transform: none;
  }
  50% {
    transform: scale(1.5) rotateY(1080deg);
  }
  100% {
    transform: scale(0.9) rotateY(2160deg);
  }
}

HTML代码（基于Tailwind CSS） #

<div
  className={
    "w-36 h-36 cursor-pointer relative rounded-full border-4 border-yellow-200" +
    (result === 1 ? " coinflip-playerOne" : "") +
    (result === 2 ? " coinflip-playerTwo" : "")
  }
  style={{ transformStyle: "preserve-3d" }}
>
  <div className="absolute w-full h-full" style={{ backfaceVisibility: "hidden" }}>
    <img
      src={"https://crafatar.com/avatars/" + playerOne + "?size=128"}
      className="w-full rounded-full"
      style={{ transform: "rotateY(180deg)" }}
    ></img>
  </div>
  <div
    className="absolute w-full h-full"
    style={{ backfaceVisibility: "hidden" }}
  >
    <img
      src={"https://crafatar.com/avatars/" + playerTwo + "?size=128"}
      className="w-full rounded-full"
    ></img>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Doppelbemme