Question

我的Bootstrap卡有点麻烦并且在Safari中翻转，在所有其他浏览器中工作都很好，但是当涉及到Safari时，似乎它并不想玩球。

Here is my code: http://codepen.io/go6/pen/ONrBeR

正如你可以看到它只是一张卡片，其中两张脸上都装满了内容。在Chrome等中翻转非常好。

我尝试过在Safari中旋转它的度数，例如，如果你将它旋转到179度和181度，你就可以看到卡的一半。然而，在它应该是180度的情况下，它会在短暂的一秒之后再次消失。

所以我只想问一下，我是否需要做些什么才能在safari中完成这项工作。

提前致谢!!

Answer 1

我认为这是因为父元素.panel的背景颜色。当我从中删除背景颜色并将其添加到.face时，它对我有效。

想象一下，它就像一个透明的盒子（面板），你把另外两个（脸，脸背）放入其中。现在你画出外盒（面板）的背面并翻转它。当然，你再也看不到包含盒子（脸，脸背）了。

总而言之：包含框（面）位于其父（面板）背景之后。因此，请将父项保持透明，然后为包含的框着色。