divをフリップして別のdivを表示するためにtransformを使ってカードをシミュレートしようとしています

Question

divをフリップするようにしようとしています。

私はホバリングしても、表示していないので反転して白くなっているようです。私は他の（。バック）を表示する方法を知らない。

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

イムではない私は、この場合には間違ってやっているかわから：ここ

は私が https://jsfiddle.net/q2ukg0cz/

そのシンプルを作成フィドルです。

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

問題は、この1

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