点击图片看翻转效果
html结构
<div class="flip"> <div class="front"> <img src="images/img_01.jpg" alt=""> </div> <div class="back"> <img src="images/img_03.jpg" alt=""> </div> </div>
样式
.container{perspective:1000;transform-style:preserve-3d;} .container,.front,.back{width:380px;height:270px;} .flip{position:relative;transition:2s;transform-style:preserve-3d;} .front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden; height: 473px;} .front{z-index:2;} .back{transform:rotateY(-180deg); height: 473px;} /*.container:hover .flip{transform:rotateY(180deg);}*/ .rotate{transform:rotateY(180deg);}
js
$(function(){ var flag = true; $(‘.container‘).click(function(){ if(flag){ $(‘.flip‘).addClass(‘rotate‘); flag = false; } else{ $(‘.flip‘).removeClass(‘rotate‘); flag = true; } }); });
时间: 2024-08-11 01:23:07