SOURCE

console 命令行工具 X clear

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


/* 下面开始是代码: */

/* 第一步:让两个box重合 */
.outer{ position: relative;}

.one, .two{
  position: absolute;
  left:0;
  top:0;
}

/* 第2步: 让父元素开启preserve 3d */
.outer{
  transform-style: preserve-3d;
}

/* 第3步: 让一个向前,一个向下并旋转变形,使两个box垂直 */
.one{
  transform: translateZ(15px);
}
.two{
  transform: translateY(15px) rotateX(-90deg);
}

/* 第4步: 让父元素旋转90度  */
.outer:hover{
  transform: rotateX(90deg);
  /* transform: rotate3d(1,1,0, 60deg) 可以观察 */
}