CSS3卡片旋转效果

HTML:

<div id="rotate">
    <div id="rotate_wrap">
        <div id="front">
            <img src="__PUBLIC__/img/wechat/front.png">
        </div>
        <div id="back" class="back">
            <img src="__PUBLIC__/img/wechat/back.png">
        </div>
    </div>
</div>

CSS:

/*点击翻转效果*/
#front,#back{
  position:absolute;  /*将两个图标定位到一起*/
  top:0;
  left:0;
  transform-style:preserve-3d;  /*设置为3d样式*/
  backface-visibility:hidden;  /*背面隐藏*/
  transition:0.6s;  /*过度动画时长*/
}
.front{transform:rotateY(0);}  /*0的就是正面*/
.back{transform:rotateY(180deg);opacity:0;}  /*将背面设置为180或-180则为隐藏状态；opacity增强可靠性，非必须*/

JS:

$(function(){
    $('#front').on('click',function(){
        $(this).addClass('back').removeClass('front');
        $('#back').addClass('front').removeClass('back');
    });
    $('#back').on('click',function(){
        $(this).addClass('back').removeClass('front');
        $('#front').addClass('front').removeClass('back');
    });
});