CSS 卡翻转未显示背面

Question

我设置了一个卡片翻转功能，用户可以看到卡片的背面，点击并拖动它，然后点击一个热点(这里的黑条)，然后将卡片翻转过来。

除了显示卡片背面的部分外，其他部分都可以工作。翻转动画发生了，它只是空白。

任何帮助都将非常感激!

我在这里…

这是一个功能的提琴

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/

需要back的初始状态翻转180度。

.back {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

我添加了一些文字，所以你可以看到它翻转。尝试不同的后台图像，因为你正在使用重定向，我认为没有加载。在我的链接中，我再次使用了前面。

我将BG设置为50%，这样你就知道它确实是背面。

http://jsfiddle.net/gJaCP/4/

http://davidwalsh.name/css-flip