CSS Card Flip沒有顯示背面[重復]

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


This question already has an answer here:

這個問題在這里已有答案:

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

1 个解决方案

#1


3  

http://jsfiddle.net/gJaCP/3/

You need the initial state of back to be flipped 180.

你需要將初始狀態的背面翻轉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.

我將BG設置為50%只是因為你知道它確實是后面的。

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

http://davidwalsh.name/css-flip


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/03/28/72fd1768a1a3f3cb89037a1a24abd588.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com