Transform 属性在 Firefox 中不起作用，但在 Chrome 和 Safari 中起作用。该怎么办？

Question

Udate

呼吁保持一致 - Mozilla bug

Udate

添加

  transform: rotateY(0deg);

卡的一侧，是需要正确修复的临时修复。

重复不影响这个解决方案，而且是模糊的。

问题

尤其是这里的backface-visibility：

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;

  backface-visibility: hidden;
}

我尝试添加 -moz- 前缀，尽管根据 caniuse 应该不需要它：

还是不行。 Chrome 没有任何前缀，而 Safari 使用 -webkit- 前缀，这与 caniuse.com 不同。

这里是jsfiddle。点击图标应该会使图标旋转 180 度。

Answer 1

将rotateY(0deg) 添加到您的.card__face--front 类中。

.card__face--front { transform: rotateY(0deg); }

http://jsfiddle.net/3h0cgukf/