css-卡牌反转（两个内容）
<div class="dxd_fz">
<ul>
<li>
<div class="fz_1">
<img src="images/fz_1.png" alt=""> 经验丰富
</div>
<div class="fz_2">
2222222222222222222
</div>
</li>
</ul>
</div>
.dxd_fz ul {
display: flex;
justify-content: space-between;
/* align-items: center; */
}
.dxd_fz ul li {
flex: 0 0 17.5%;
max-width: 17.5%;
perspective: 800px;
height: 200px;
cursor: pointer;
position: relative;
}
.dxd_fz ul li .fz_1 {
background-color: #0068b7;
display: flex;
height: 100%;
flex-direction: column;
/* justify-content: center; */
align-items: center;
padding: 50px 30px 0;
font-size: 18px;
color: #fff;
transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
border-radius: 20px;
}
.dxd_fz ul li .fz_1 img {
max-width: 100%;
margin-bottom: 40px;
}
.dxd_fz ul li .fz_2 {
background-color: #0068b7;
display: flex;
height: 100%;
flex-direction: column;
/* justify-content: center; */
align-items: center;
padding: 50px 30px 0;
font-size: 14px;
line-height: 2.5;
color: #fff;
border-radius: 20px;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
backface-visibility: hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
/* z-index: -1; */
}
.dxd_fz ul li:hover .fz_1 {
transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.dxd_fz ul li:hover .fz_2 {
transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
