我设置了卡片翻转功能，用户可以看到卡片的背面，单击并拖动它，然后单击热点（此处为黑条），然后将卡片翻转过来。
除了显示卡片背面的部分外，所有这些都有效。翻转动画发生，它只是空白。
任何帮助将不胜感激！
这就是我所在的地方...
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;
}