jquery - Safari -webkit-backface-visibility 无法正常工作

Question

我有一个页面元素，它是 CSS 转换以翻转卡片的正面和背面。

在 Safari 中，我似乎无法隐藏正面背面或显示背面，可能是因为正面 div 的背面没有按应有的方式隐藏。

它在 Chrome 中完美运行，但在 Safari 中运行不佳。

我在这里发现了类似的问题，但提供的解决方案都没有任何效果。

.item-front, .item-back {
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}

这是一个 fiddle :

http://jsfiddle.net/ddolan/V2gvG/4/

Answer 1

Safari 目前需要 -webkit 前缀用于 transition 和 transform。在您的 fiddle 中，您忘记了在 .item-flipper 规则中添加 transform-style: preserve-3d; 前缀。

只需添加 -webkit-transform-style: preserve-3d; 即可在 Safari 中使用。