背面仍然可见，即使它被设置为“隐藏”

Question

我在CSS3中创建了一个simple "flip card"，当用户在卡片上盘旋时，它会向下翻转并显示另一侧。 backface-visibility设置为hidden，因此不会显示背面。但是，当我尝试翻转卡片时，背面仍然显示出来。

所以我看了一下我发现的working examples，有趣的是我和他几乎一样，他的确有效，但不是我的。 ^{_{（怎么可能呢？！）}} 以下an answer here也不起作用 ^{_{（因为我已经设置了所有内容{{1} } backface-visibility）}} 。

这是我的一段代码：

hidden

有关为何发生这种情况的任何想法？

Answer 1

一个小小的补充就是诀窍：

.flip {
  ...
  -webkit-transform-style: preserve-3d;
}

没有或使用非webkit浏览器的其他前缀，具体取决于他们的支持。