背面仍然可見，即使它被設置爲「隱藏」

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瀏覽器，這取決於他們的支持。