CSS卡翻页不是'；露背

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

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

任何帮助都将不胜感激

我就在这里

HTML

您需要将back的初始状态翻转180

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

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

我将BG设置为50%，只是为了让你知道它确实是背面

---

看起来您正在翻牌。你所有的内容都在卡片的一边。我有我的舞台，卡片，然后是正面和背面。这不是正确的结构吗？而且你的形象也不正确。在这里我将发布。我更改了背面以便于查看。这是很好的进步，谢谢！现在，当我添加第二张卡片时，我在Safari中得到了一些奇怪的z索引！这张牌看起来好像在其他牌后面翻转。我将开始另一次讨论。谢谢，伙计们。

.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;
}

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