用css实现一个翻牌动画，效果图如下所示：
代码：
<style>
img{
width: 200px;}
.card{
width: 200px;
height: 380px;
position: relative;
float: left;
margin: 0 10px;
}
.card .font,.card .back{
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
transition: all 0.5s;
}
.card .font{
transform: rotateY(0deg)
}
.card .back{
transform: rotateY(180deg)
}
.card:hover .font{
transform: rotateY(180deg)
}
.card:hover .back{
transform: rotateY(0deg)
}
.card-xia{
margin-top: 40px;
position: absolute;
left: 250px;
top:0;
}
</style>
</head>
<body>
<div class="card">
<a href="https://blog.csdn.net/" class="font"><img src="img/font1.jpg"/></a>
<a href="https://blog.csdn.net/" class="back"><img src="img/back1.jpg"/></a>
</div>
<div class="card">
<a href="https://blog.csdn.net/" class="font"><img src="img/font2.jpg"/></a>
<a href="https://blog.csdn.net/" class="back"><img src="img/back2.jpg"/></a>
</div>
<div class="card">
<a href="https://blog.csdn.net/" class="font"><img src="img/font3.jpg"/></a>
<a href="https://blog.csdn.net/" class="back"><img src="img/back3.jpg"/></a>
</div>