CSS卡片翻轉不顯示背面

我設置了卡片翻轉功能，用戶可以看到卡片的背面，單擊並拖動它，然後單擊一個熱點（此處爲黑色條），將會然後翻轉卡片。CSS卡片翻轉不顯示背面

它所有的工作，除了它顯示卡背面的部分。翻轉動畫發生，它只是空白。

任何幫助將不勝感激！

下面是我在哪裏...

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

來源

2013-03-28 Layne

它看起來像你翻轉卡。所有的內容都在卡片的一面。 – Leeish

我有我的舞臺，卡片，然後正面和背面。那不正確的結構？ – Layne

而你的形象不會進入正確的。在這裏我會發布。 – Leeish

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

來源

2013-03-28 17:27:08 Leeish

我改變了背部，使其更容易看到。 [jsfiddle]（http://jsfiddle.net/gJaCP/7/） – MiniRagnarok

這是很好的進步，謝謝！現在，當我添加第二張卡時，我在Safari中出現了一些奇怪的z-index事件！該卡看起來像是在其他卡後面翻轉。 [New Fiddle。]（http://jsfiddle.net/gJaCP/8/） – Layne

我將開始另一次討論。謝謝，夥計們。 – Layne

CSS卡片翻轉不顯示背面

回答

相關問題