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/

你需要将初始状态的背面翻转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

CSS Card Flip没有显示背面

1 个答案: