CSS Card Flip isn't showing back face [duplicate] - css

Question

This question already has answers here:
Flip a 3D card with CSS
(2 answers)
Closed 6 years ago.
I've set up a card flip feature where the user can see the back of a card, click and drag it, then click on a hot spot (black bar here) that will then flip the card over.
All of it works except the part where it shows the back of the card. The flip animation happens, it's just blank.
Any help would be greatly appreciated!
Here's where I am...
Here's a fiddle with functionality.
HTML
<div id="flipStage">
<div class="card" id="bsg">
<div class="front" id="bsgFront"></div>
<div class="back" id="bsgBack"></div>
<div class="flipButton"></div>
<div class="handle"></div>
</div>
</div>
CSS
.flipStage {
position: relative;
float: left;
width:100%;
height:100%;
}
.card {
cursor: pointer;
height:175px;
width:125px;
position:absolute;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 300px;
-moz-perspective: 300px;
-o-perspective: 300px;
perspective: 300px;
}
.flipped {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.card .front, .card .back {
display: block;
position:absolute;
height:100%;
width:100%;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility: hidden;
backface-visibility:hidden;
}
#bsg {
top:150px;
left:150px;
}
#bsgFront {
background-image:url(http://images.penguinmagic.com/images/products/original/8006b.jpg);
background-repeat:no-repeat;
background-size: 100%;
}
#bsgBack {
background-image:url(http://images2.fanpop.com/image/photos/9400000/Tricia-Helfer-BSG-Promotional-Photography-tricia-helfer-9422601-1089-1450.jpg);
background-repeat:no-repeat;
background-size: 100%;
}
.flipButton {
height: 20px;
width: 100%;
position: absolute;
top:0;
right:0;
background-color:black;
}
.handle {
position:absolute;
width: 100%;
height: 100%;
top: 20px;
}

Answer 1

http://jsfiddle.net/gJaCP/3/
You need the initial state of back to be flipped 180.
.back {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
I added a bit of text so you can see it flipping. Try a different back image, because the one you are using redirects and I think isn't loading. In my link I used the front again.
I set BG to 50% just so you know it is indeed the back.
http://jsfiddle.net/gJaCP/4/
http://davidwalsh.name/css-flip