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