两个重叠的div，点击后做前后翻转（有效果图，附上全码） 

  <!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style>
                *{margin:0;padding:0;}
                .element{position:relative;color:#fff;text-align:center;line-height:120px;transform-style:preserve-3d;transition:1s;}
                .element,.front,.back{width:90px;height:120px;backface-visibility:hidden;}
                .front,.back{position:absolute;left:0;top:0;}
                .front{background:#f00;}
                .back{background:#0f0;transform:rotateY(180deg);}
                .ele{transform:rotateY(180deg);}
            </style>
            <script src="demo/jquery-2.1.1.min.js"></script>
        </head>
        <body>
            <div class="element">
                <div class="front">前面</div>
                <div class="back">背面</div>
            </div>
            <button class="btn">点击切换</button>
        </body>
        <script>
            var sw=true;           
            $(".btn").click(function(){
                  if(sw){
                    $(".element").addClass("ele");
                    sw=!sw;
                    
                }else{
                    $(".element").removeClass("ele");
                    sw=!sw;
                }
            })
        </script>
    </html>

 

posted @ 2020-04-21 13:29  小白呀白菜  阅读(827)  评论(0)    收藏  举报