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