代码演示去菜鸟部落的首页右侧栏

<div class="card">
<div class="card-header">
 <div id="flip-wrapper">
        <div id="flip-content">
            <div class="face"
                 style="background: url(https://cnbl.net/plugin/xn_pic/img/cnmp.png) center center / 100% no-repeat;"></div>
            <div class="back face"
                 style="background: url(https://cnbl.net/plugin/xn_pic/img/ymxxcx.png) center center / 100% no-repeat;"></div>
 
 
</div>
      </div>
      </div>
      </div>
 <style>
       /* 翻转 */
#flip-wrapper {
    position: relative;
    width: 235px;
    height: 110px;
    z-index: 1;
}

/* this need to be here - i dont know why?*/
#flip-wrapper {
    -webkit-perspective: 1000;
    perspective: 1000;
}

#flip-content {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: cubic-bezier(0, 0, 0, 1.29) 0.3s;
}

#flip-wrapper:hover #flip-content {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* background-color: #e71840; */
    /*background: url(../1.png) center center no-repeat;*/
    background-size: 100%;
}

.back.face {
    display: block;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    /* background-color: #212121; */
    /*background: url(../2.png) center center no-repeat;*/
    background-size: 100%;

        }
</style>