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

Question

我在CSS3中创建了simple "flip card"，当用户将鼠标悬停在卡上时，它会向下翻转并显示另一面。 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浏览器，这取决于他们的支持。