基本思路：父div使用相对定位包裹着两个子元素，子元素使用绝对定位，定位在同一个位置，初始时一个div翻转到后面隐藏，另一个在前面显示，当鼠标悬停在父元素上时，前面的子元素旋转180度，到背面隐藏；背面的元素旋转360度，转到前面显示，这样就实现了旋转卡片的效果。撒花
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卡片翻转</title>
<style>
.outside{
220px;
height: 276px;
cursor:pointer;
margin:50px auto;
position:relative;//卡片的父元素使用相对定位
perspective:500;//相当于是Z轴，具体解释可以查看https://www.cnblogs.com/le220/p/7923210.html
-webkit-perspective:1000;
}
.outside img{
max-220px;
}
.front_img,
.back_img{
100%;
height:100%;
position:absolute;//子元素相对于父元素使用绝对定位，两个子元素都定位到同一个位置，实现重叠的效果
top:0;
left:0;
perspective: 1000;//相当于是Z轴，具体解释可以查看https://www.cnblogs.com/le220/p/7923210.html
-webkit-perspective:1000;
backface-visibility: hidden;//背面图片不可见，没有这个属性可能导致翻转时看不到背面的图片
transition: all 1.5s;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
}
.back_img{
transform: rotateY(180deg);//初始时，背面div旋转到背面
-webkit-transform: rotateY(180deg);
}
.outside:hover .front_img{
transform:rotateY(180deg);//鼠标悬浮在元素上时，前面一层的图片正旋转180度，实现前面的图片旋转到背面，达到隐藏的效果
-webkit-transform: rotateY(180deg);
}
.outside:hover .back_img{
transform:rotateY(360deg);//鼠标悬浮在元素上时，前面一层的图片正旋转360度，实现前面的图片旋转到前面，达到显示的效果
-webkit-transform: rotateY(360deg);
}
</style>
</head>
<body>
<div>
<div class="outside">
<div class="front_img">
<img src="https://gaopin-preview.bj.bcebos.com/133206318551.jpg@!420" alt="front_picture"/>
</div>
<div class="back_img">
<img src="https://cdn.duitang.com/uploads/item/201402/03/20140203220956_dnZGV.thumb.600_0.jpeg" alt="back_ground" />
</div>
</div>
</div>
</body>
</html>