Click on the flip display, backface-visibility:hidden is the key to toggle ()

body,div,p,span{ margin: 0px; padding: 0px; } .box{ width: 200px; height: 300px; position: relative; margin: 100px auto; perspective: 600px; } .box div{ height: 100%; width:100%; position: absolute; left: 0px; top: 0px; backface-visibility:hidden; The transition - duration: 0.4 s; text-align: center; line-height: 300px; color:#ffffff;font-size: 30px; } .box div:nth-of-type(1){ background-color: red; transform:rotateY(0deg); } .box div:nth-of-type(2){ background-color: green; transform:rotateY(-180deg); } .box.turn div:nth-of-type(1){ transform:rotateY(180deg) } .box.turn div:nth-of-type(2){ transform:rotateY(0deg) } <div  class="box"</div> <div>00011</div> </div> document.querySelector("div.box").onclick = function (){
        this.classList.toggle('turn'); //classList is the className collection of the current elementreturn false;
    }Copy the code