3

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?

Community
  • 1
  • 1
Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247

1 Answers1

3

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.

a better oliver
  • 26,330
  • 2
  • 58
  • 66
  • The only non-WebKit browser supporting `transform-style` is Firefox, which supports it without a prefix. – Ana Mar 16 '13 at 09:37
  • You are partially right. Support without a prefix is only offered in recent versions of Firefox. `transform-style` is also supported by IE10, but not the value `preserve-3d`. – a better oliver Mar 16 '13 at 09:55