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

Question

更新

呼吁一致性 - Mozilla bug

更新

添加

  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 { 变换:旋转Y(0度)； }

http://jsfiddle.net/3h0cgukf/