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/