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); }