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

Question

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

所以我查看了我发现的working examples，有趣的是我和他的东西几乎一样，他的确实有效，但不是我的。 _{^{（这怎么可能？！）}}关注an answer here也不起作用_{^{（因为我已经将所有backface-visibility设置为@987654327 @)}}.

这是我的一段代码：

$(".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 浏览器不带或带其他前缀，取决于它们的支持。