javascript - 即使设置为 "hidden"，背面仍然可见

Question

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

所以我查看了 working examples我发现，有趣的是，我和他的东西几乎一样，他的确实有用，但我的不行。 _{^{(这怎么可能？!)}} 关注an answer here也不起作用_{^{(因为我已经将所有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 浏览器，不带或带其他前缀，取决于它们的支持。