css3图片3D翻转效果

Posted 2020-07-26 djdliu

点击图片看翻转效果

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