CSS3 Card Flip backface disappears at end of transform

Solution 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/

Solution 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/