Backface still visible even it is set to "hidden"

Question

I have created a simple "flip card" in CSS3, and when a user hovers over the card, it would flip downward and show the other side. backface-visibility is set to hidden so the back face will not be shown. However, when I try flipping the card, the backside is still showing up.

So I have taken a look in the working examples I found, and interestingly I have almost the same thing as his, and his does work but not mine. _{^{(How is that even possible?!)}} Following an answer here also does not work _{^{(because I have already set everything backface-visibility to hidden)}}.

Here's a piece of my code:

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

Any idea on why this happened?

Answer 1

A small addition does the trick:

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

Without or with another prefix for non-webkit browsers, depending on their support.