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- 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- 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);

}