css实现卡片翻转效果

html:

    

       前边内容
    
    

       翻转后内容
    

css:

.cont{
    width: 200px;
    height: 200px;
    margin: 200px auto 0;
    position: relative;
    color: #fff;
}
.cont .contBefore{
    width: 200px;
    height: 200px;
    background: #0b6aff;
    /*动画的过渡时间*/
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;

}
.cont .contAfter{
    width: 200px;
    height: 200px;
    background: red;
    /*1.通过定位，使背面覆盖前面*/
    position: absolute;
    top: 0;
    left: 0;
    /*2.使用rotate翻转,背面初始翻转180*/
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
   /* 隐藏所翻转的元素*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
.cont:hover .contAfter{
    /*鼠标移入时，背面翻转为0，显示出来*/
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.cont:hover .contBefore{
    /*鼠标移入时，前面翻转180*/
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}