Firefox中CSS动画Bug：卡片旋转时图标与数值共存问题排查

看起来你遇到的是Firefox对CSS 3D变换的处理逻辑和Chrome/Opera不一致的问题，核心原因是Firefox默认不会隐藏元素背面，且对3D变换的上下文要求更严格。咱们一步步来解决：

先梳理你的代码结构 #

先把你提供的Haml代码整理成更清晰的嵌套结构（确保正反两面的.side都正确归属到.card容器下）：

.card
  .side.back
    %span.txt {{ notifications.length }}
  .side
    %i.material-icons.small_icon remove_red_eye

问题根源拆解 #

Chrome和Opera会自动处理3D变换中的背面可见性，但Firefox需要显式设置隐藏规则；另外，父容器.card必须开启3D上下文，否则Firefox会把所有子元素扁平化处理，导致正反两面的内容同时暴露出来。

完整的兼容CSS方案 #

你之前写的Firefox动画属性不完整，现在补全并添加关键的3D兼容属性：

/* 卡片容器核心样式：开启3D上下文 */
.card {
  position: relative;
  width: /* 替换成你的卡片实际宽度 */;
  height: /* 替换成你的卡片实际高度 */;
  /* 标准3D上下文设置 */
  transform-style: preserve-3d;
  /* 通用旋转动画 */
  animation-name: spin;
  animation-duration: 2500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* Firefox前缀兼容 */
  -moz-transform-style: preserve-3d;
  -moz-animation-name: spin;
  -moz-animation-duration: 2500ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
}

/* 卡片正反两面的基础样式：隐藏背面 */
.side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 核心：旋转时隐藏元素背面 */
  backface-visibility: hidden;
  /* Firefox前缀兼容 */
  -moz-backface-visibility: hidden;
}

/* 背面卡片提前翻转180度，确保旋转后内容正向显示 */
.side.back {
  transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

/* 旋转动画关键帧：标准+Firefox双版本 */
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@-moz-keyframes spin {
  from { -moz-transform: rotateY(0deg); }
  to { -moz-transform: rotateY(360deg); }
}

关键注意事项 #

• 必须给.card设置transform-style: preserve-3d，这是Firefox正确渲染3D变换的前提
• 所有.side元素都要加backface-visibility: hidden，否则旋转时背面内容会一直显示
• 背面的.side.back需要提前翻转180度，这样卡片转到背面时，数值内容才是正向的

这样修改后，Firefox里的卡片旋转效果就会和Chrome/Opera保持一致，不会再出现眼睛图标和数值同时显示的情况啦～

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