SOURCE

<div class="box">
    <div class="d1">
        a面
    </div>
    <div class="d2">
        b面
    </div>

<style>
    body{
        background:grya;
    }
.box{
    border:1px solid;
    width:100px;
    height:100px;
    
    margin:100px auto;
    transform-style:preserve-3d;
     transition:all 2s;
}

.d1,.d2{
    position:absolute;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    margin:25px;
  
   

}
.d1{
    background:pink;
    transform:rotateY(180deg);
}

.d2{
    background:red;
}

.box:hover{
 transform:rotateY(180deg);
}

</style>