先看效果：
联想一下：如果A面放一张照片，B面是一段介绍和链接，是不是很有意思？多张照片组成的照片墙，是不是很浪漫(ˉ▽ˉ )
再上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
400px;
height: 400px;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
perspective: 500px;
/*元素距离视图的距离,以像素计*/
}
.centter {
height: 200px;
200px;
transition: all 1s ease-in-out;
cursor: pointer;
position: relative;
}
.centter_child {
height: 100%;
100%;
position: absolute;
top: 0;
right: 0;
}
.A_side {
background-color: #999;
transition: all 0s ease-in-out 0.5s;
z-index: 10;
}
.B_side {
background-color: red;
transition: all 0s ease-in-out 0.5s;
z-index: 0;
}
.centter:hover {
transform: rotate3d(0, 1, 0, 180deg);
}
.centter:hover .A_side {
z-index: 0;
}
.centter:hover .B_side {
z-index: 10;
transform: rotate3d(0, 1, 0, 180deg);
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="centter">
<div class="A_side centter_child">正面</div>
<div class="B_side centter_child">反面</div>
</div>
</div>
</div>
</body>
</html>