利用hover控制动画，一个从反面向正面翻，一个从正面向反面翻。
利用：backface-visibility: hidden;控制反面的元素不显示。
不支持的浏览器直接切换层级换图（部分ie9模拟器不支持）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3双面翻转</title>
</head>
<style>
*{margin: 0; padding:0;}
img{
width: 100%;
height: 100%;
}
.card-content{
width: 295px;
height: 295px;
margin: 0 auto;
}
.inner {
display: block;
position: relative;
width: 100%;
height: 100%;
-webkit-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-ms-transform: perspective(1000px);
-o-transform: perspective(1000px);
transform: perspective(1000px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front, .back{
width: 100%;
height: 100%;
position:absolute;top: 0px;left: 0px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
-ms-transition: 0.6s;
transition: 0.6s;
cursor: pointer;
}
.front {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg)
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg)
}
.card-content:hover .inner .back{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.card-content:hover .inner .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<body>
<div class="card-wrapper">
<div class="card-content">
<a class="inner" href="#">
<div class="front">
<img src="./images/mobile_2.jpg" alt="">
</div>
<div class="back">
<img src="./images/mobile_1.jpg" alt="">
</div>
</a>
<p>这里可以做一些描述的文案</p>
</div>
</div>
</body>
</html>
参考博客：https://www.cnblogs.com/zhidong123/p/4940540.html
原文：https://www.cnblogs.com/lisaShare/p/13218465.html