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