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'); }); }); |