CSS3 Card Flip backface disappears at end of transform - css

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/

Answer 3

None of the existing answers worked for me. I had a child element on the front of the card that was disappearing upon flipping it.
<div class="front">
<div class="mytext">
{{data.text}}
</div>
</div>
To fix it, I had to add the transform property to the child as well.
.front {
transform: rotateY(180deg);
display: flex;
justify-content: center;
align-items: center;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
.mytext {
transform: rotateY(0deg);
z-index: 1;
}