转换属性在 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 class。

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

Transform property does not work in Firefox but does in Chrome and Safari. What to do?