フリップカード。ユーザーが見つけたときにホバーとフリップの両方を反転する

Question

divのフリップカードを実装しました。これは、ユーザーがdivに移動したときに効果的ですが、divでアンハーバーすると解除されませんが、元々のやり方で、滑らかな移行を戻すことはできません。

誰でも、フリップ・カードから元のように見えるものにスムーズに移行するのを助けることができます。

下記のコードをご覧ください。

また、here is a jsfiddleも問題を明確にします。

CSS

.wrapper { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    margin: 0 0 20px; 
} 
.background-out, 
.background-over { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 
.background-info { 
    position: absolute; 
    left: 200px; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    visibility: hidden; 
    opacity: 0.2; 
    transform-origin: 0% 50% 0px; 
    transform: rotateY(-90deg); 
    background-color: grey; 
} 
.background-info .text { 
    padding: 5px; 
} 
.background-out { 
    background-color: red; 
} 
.background-over { 
    background-color: green; 
    visibility: hidden; 
    opacity: 0; 
    transform-origin: 100% 50% 0px; 
    transform: rotateY(-90deg); 
} 
.wrapper:hover .background-out { 
    visibility: hidden; 
} 
.wrapper:hover .background-over, 
.wrapper:hover .background-info { 
    transform: translate3d(0px,0px,0px) rotateY(0deg); 
    transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, 
    -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, 
    -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms; 
    visibility: visible; 
    opacity: 1; 
} 

HTML

<div class="wrapper"> 
    <div class="background-out"></div> 
    <div class="background-over"></div> 
    <div class="background-info"> 
    <div class="text">Text 1</div> 
    </div> 
</div> 

Answer 1

またないだけに遷移プロパティを追加する必要があります置くだけでなく、HTML要素自体に。

See fiddle

CSS

.wrapper { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    margin: 0 0 20px; 
} 

.background-out, 
.background-over { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

.background-out, 
.background-over, 
.background-info { 

    transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms; 
} 

.background-info { 
    position: absolute; 
    left: 200px; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0.2; 
    transform-origin: 0% 50% 0px; 
    transform: rotateY(-90deg); 
    background-color: grey; 
} 

.background-info .text { 
    padding: 5px; 
} 

.background-out { 
} 

.background-over { 
    background-color: green; 
    opacity: 0; 
    transform-origin: 100% 50% 0px; 
    transform: rotateY(-90deg); 
} 

.wrapper:hover .background-out { 
} 

.wrapper:hover .background-over, 
.wrapper:hover .background-info { 
    transform: translate3d(0px, 0px, 0px) rotateY(0deg); 
    transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms; 
    opacity: 1; 
} 

HTML

<div class="wrapper"> 
    <div class="background-out"></div> 
    <div class="background-over"></div> 
    <div class="background-info"> 
    <div class="text">Text 1</div> 
    </div> 
</div>