CSS3 - 3D卡片翻轉動畫不使用點擊事件

Question

我是新來的CSS3，我對3D動畫感興趣。我有一個問題，希望有人能幫助我。有沒有辦法在不使用點擊事件的情況下製作卡片翻轉效果？我已經搜索了很多關於它的信息，但用我的小經驗無法產生結果。請，你能幫我嗎？

Answer 1

你可以用css-transitions來做到這一點，並且根本沒有Javascript。使用CSS :target屬性來檢測卡的

CSS

a { 
    display: block; 
    margin-bottom: 10px; 
    padding: 10px; 
    width: 135px; 
    background: red; 
    border: 1px solid black; 
    border-radius: 10px; 
    color: white; 
    text-transform: uppercase; 
    text-decoration: none; 
} 

a.unflip { display: none; } 
div.card { position: relative; } 

img { 
    position: absolute; 
    width: 190px; 
    height: 265px; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    -ms-transition: all 1s; 
    transition: all 1s; 
} 

img.front { z-index: 1; } 

img.back, div#flip:target img.front { 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
    z-index: 0; 
} 

div#flip:target a.flip { display: none; } 
div#flip:target a.unflip { display: block; } 

div#flip:target img.back { 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    z-index: 1; 
} 

HTML狀態：

<div class='card' id='flip'> 
    <a href='#flip' class='flip'>Flip that card</a> 
    <a href='#unflip' class='unflip'>Flip that card</a> 
    <img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRZNrO98qaNGRBnMuuMctzqNMsE0DeUQXelgWi2zPsKYmjD-lqn' class='front' /> 
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSwcvrsqZZFqZYMPSfVGDomBaDbQc2b7A1i88kDA2P52k3VN0y7w' class='back' /> 
</div> 

演示在這裏：http://jsbin.com/emolev/1/edit