CSS/js翻轉卡

Question

我有一個卡套和卡的背面。如何通過點擊按鈕like this將我的卡從蓋子翻轉回來？

Here is demo

Answer 1

也許你需要

HTML

<div class="flip3D"> 
    <div class="back">Box 1 - Back</div> 
    <div class="front">Box 1 - Front</div> 
</div> 

CSS

.flip3D{ width:240px; height:200px; margin:10px; float:left; } .flip3D > .front{ position:absolute; -webkit-transform: perspective(600px) rotateY(0deg); transform: perspective(600px) rotateY(0deg); background:#FC0; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D > .back{ position:absolute; -webkit-transform: perspective(600px) rotateY(180deg); transform: perspective(600px) rotateY(180deg); background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D:hover > .front{ -webkit-transform: perspective(600px) rotateY(-180deg); transform: perspective(600px) rotateY(-180deg); } .flip3D:hover > .back{ -webkit-transform: perspective(600px) rotateY(0deg); transform: perspective(600px) rotateY(0deg); } 

http://jsfiddle.net/GDdtS/9444/