.flip-container {
    display: inline-block;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    perspective: 500;
    -ms-transform: perspective(500px);
    -moz-transform: perspective(500px); /*重要*/
    transform-style: preserve-3d; /*重要*/
}
.flipper {
    position: relative;
    width: 126px;
    height: 80px;
    transition: 0.6s;
    transform-style: preserve-3d; /*重要*/
}
/* 触发翻转 */
.flip-container:hover .flipper{
    transform: rotateY(180deg);

}
.front ,.back{
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;  /*重要*/
    width: 100%;
    height: 100%;
}
.front {
    transform: rotateY(0deg);
    z-index: 2;
    background: #fff;
}
.back {
    transform: rotateY(-180deg);
    background: #f9f9f9;
}
  

.flip-container2 {
    display: inline-block;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    perspective: 500;
    -ms-transform: perspective(500px);
    -moz-transform: perspective(500px); /*重要*/
    transform-style: preserve-3d; /*重要*/
}
.flipper2 {
    position: relative;
    width: 126px;
    height: 80px;
    transition: 0.6s;
    transform-style: preserve-3d; /*重要*/
}
/* 触发翻转 */
.flip-container2:hover .flipper2{
    transform: rotateY(180deg);

}
.front2 ,.back2{
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;  /*重要*/
    width: 100%;
    height: 100%;
}
.front2 {
    transform: rotateY(0deg);
    z-index: 2;
    background: #fff;
}
.back2 {
    transform: rotateY(-180deg);
    background: #f9f9f9;
}