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

Question

我在 CSS3 中创建了一个简单的“翻转卡片”，当用户将鼠标悬停在卡片上时，它会向下翻转并显示另一面。backface-visibility设置为，hidden因此背面将不会显示。但是，当我尝试翻转卡片时，背面仍然出现。

因此，我查看了我找到的工作示例，有趣的是，我的内容与他的几乎相同，而且他的确实有效，但我的无效。_{^{（这怎么可能？！）}}在这里回答也不起作用_{^{（因为我已经将所有内容都设置backface-visibility为hidden）}}。

这是我的一段代码：

$(".wrapper").hover(function () {
    $(".flip").stop().transition({
        perspective: '100px',
        rotateX: '-180deg'
    }).toggleClass("down");
}, function () {
    $(".flip").stop().transition({
        perspective: '100px',
        rotateX: '0deg'
    }).toggleClass("down");
});

知道为什么会这样吗？

Answer 1

一个小的添加就可以了：

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

非 webkit 浏览器是否不带或带另一个前缀，具体取决于它们的支持。