console
<div class="outer">
<div class="one">首页</div>
<div class="two">Home</div>
</div>
*{
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.outer{
width: 100px;
height: 30px;
margin: 100px auto;
text-align: center;
line-height: 30px;
}
.outer div{
width: 100px;
height: 30px;
}
.one{ background-color: lightblue;}
.two{ background-color: lightcoral;}
.outer{
position: relative;
transition: all 0.5s;
}
.outer{ position: relative;}
.one, .two{
position: absolute;
left:0;
top:0;
}
.outer{
transform-style: preserve-3d;
}
.one{
transform: translateZ(15px);
}
.two{
transform: translateY(15px) rotateX(-90deg);
}
.outer:hover{
transform: rotateX(90deg);
}