css3卡片翻转效果

css3的卡片翻转效果是在日常工作中经常会用到的一个动态效果，废话不多说，先看看代码。

HTML：（注意翻转当然是两张不同的图   前面要显示的和后面要显示的图）

<div class="flip-con">
      <div class="flip-box">
            <a href="" target="_blank" class="brand-front"></a>
            <a href="" target="_blank" class="brand-back"></a
      </div>
</div>

css：

.flip-con{
    width:292px;  
    -ms-transform: perspective(500px);
    -moz-transform: perspective(500px);
    transform-style: preserve-3d;
}
.flip-con .flip-box{
    width:292px;
    height:297px;/*这里自然是需要翻转的图片的宽高*/
    position: relative;
    transition: 0.6s;
    transform-style: preserve-3d;
    margin-bottom: 25px;
}
.flip-box>a{
    width:292px;
    height:297px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}
.flip-box>a.brand-back{
    transform: rotateY(180deg);/*这句代码相当于把背面要显示的图片旋转180度使其要显示的图显示在背面，整体翻转的时候才能显示出来*/
}
.flip-con:hover .flip-box{
    transform: rotateY(180deg);
}
.flip-con:nth-child(1) a.brand-front{
    background: url("../images/brand1.png") no-repeat center;/* 正面背景 */
}
.flip-con:nth-child(1) a.brand-back{
    background: url("../images/brand1-b.png") no-repeat center;/* 反面背景 */
}

 

还可以选择翻转方向