<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>

/*点击翻转效果*/

#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增强可靠性，非必须*/

$(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');

    });

});