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;
transition-duration: 0.4s;
text-align: center;
line-height: 300px;
color:
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>
<div>00011</div>
</div>
document.querySelector("div.box").onclick = function (){
this.classList.toggle('turn'); //classList是当前元素的className集合
return false;
}