試圖通過使用變換來翻轉一個div來模擬卡片翻轉並顯示另一個div

Question

我試圖製作一組翻轉的div ......有點像翻轉一張記事本。

看來，當我徘徊，雖然它翻轉，併成爲白色，因爲我沒有顯示任何。我不知道如何讓其他（.back）顯示。

這裏是一個小提琴，我創建 https://jsfiddle.net/q2ukg0cz/

它是一種簡單的：

<div class="flip-card"> 
    <div class=front">Hello</div> 
    <div class="back">World</div> 
</div> 

林不知道我在做什麼錯在這種情況下。

div.flip-card { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    -webkit-perspective: 600px; 
 
    perspective: 600px; 
 
} 
 
div.flip-card > div.front, 
 
div.flip-card > div.back { 
 
    display: block; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-top: 1em; 
 
    border: 1px solid #000; 
 
    color: #fff; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    text-shadow: -1px -1px rgba(0, 0, 0, 0.4); 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
div.flip-card > div.front { 
 
    background: #888; 
 
    -webkit-transform: rotateY(0deg) rotateX(0deg); 
 
    transform: rotateY(0deg) rotateX(0deg); 
 
} 
 
div.flip-card > div.back { 
 
    background: #444; 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
} 
 
div.flip-card > div.front:hover { 
 
    background: #444; 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 
div.flip-card > div.back:hover { 
 
    background: #888; 
 
    -webkit-transform: rotateY(0); 
 
    transform: rotateY(0); 
 
}

Answer 1

的問題是你的選擇火觸發器
jsFiddle

試試這個

div.flip-card { 
    display: block; 
    width: 200px; 
    height: 200px; 
    -webkit-perspective: 600px; 
    perspective: 600px; 
} 

div.flip-card > div.front, 
div.flip-card > div.back { 
    display: block; 
    box-sizing: border-box; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    padding-top: 1em; 
    border: 1px solid #000; 
    color: #fff; 
    font-size: 3em; 
    text-align: center; 
    text-shadow: -1px -1px rgba(0, 0, 0, 0.4); 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

div.flip-card > div.front { 
    background: #888; 
    -webkit-transform: rotateY(0deg) rotateX(0deg); 
    transform: rotateY(0deg) rotateX(0deg); 
} 

div.flip-card > div.back { 
    background: #444; 
    -webkit-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
} 

div.flip-card:hover > div.front { 
    background: #444; 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

div.flip-card:hover > div.back { 
    background: #888; 
    -webkit-transform: rotateY(0); 
    transform: rotateY(0); 
}