CSS3 Card Flip backface disappears at end of transform

Question

I've gotten a simple set of cards that I need to flip on click. The problem is that when the transform is done the backface (blue side) disappears. It kind of shows up during the animation back to the front-face.

I know it's probably a simple solution and something simple, but it might not be. I can replicate the results in Chrome (Canary) and Safari.

I've tried some things with backface-visibility that allow it to not disappear but then I can click it with the jQuery listener and have it flip back to the front.

Here is the fiddle: http://jsfiddle.net/9gPfz/1/

Here's the CSS: `.equipment-card-holder{ -webkit-perspective: 1000; }

.equipment-card{ height: 250px; width: 222px; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.9); float: left; margin: 0 9px 30px;

-webkit-transform-style: preserve-3d;


-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; 
}

.equipment-card .card-face{
    -webkit-backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    }

.equipment-card .card-front{
    -webkit-transform: rotateY(0deg);
    }

.equipment-card .card-back{
    -webkit-transform: rotateY(180deg);
    background-color: lightBlue;
    }

.equipment-card.flipped{
    -webkit-transform: rotateY(180deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);

    }

.span12{

width: 960px;
}
}`

You will need a webkit based browser for the vendor prefixes I am using.

Answer 1

Ok so I figured out the problem, and yes it was simple. The problem is that I had a background color set on the card (vs on both faces of the card). I hope this answer my prove useful to someone in the future who may be Googling with this issue.

Edit: More exact answer

css:8 remove the background of the card

background: #fff;

And just just put background to the face

Can check the update of the same fiddle http://jsfiddle.net/9gPfz/2/

Answer 2

I was doing a similar thing but the accepted answer did not work for me. So I tried some other hacks.

What's happening is that the background of the "back" class is somehow overridden by the background of the "flipped" class.

It can be corrected by adding a background: transparent; on the flipped class.

Mind you this is not a perfect solution. Just a workaround.

.equipment-card.flipped{
    -webkit-transform: rotateY(180deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    background: transparent;
}

Checkout the updated fiddle here: http://jsfiddle.net/9gPfz/28/