SOURCE

<div class="outer">
    <div class="one">A</div>
    <div class="two">B</div>
</div>

*{
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}
.outer{
    width: 200px;
    height: 200px;
    margin: 100px auto;
}

.outer div{
    width: 200px;
    height: 200px;
}

.one{ background-color: lightblue;}
.two{ background-color: lightcoral;}

.outer{
    position: relative; 
    transition: all 0.5s;
}


/* 下面开始是代码： */
body{
    perspective: 600px;
}

.outer div{ 
    /* 使AB两面重合在一起 */
    position: absolute;
}

/* 要对子元素开启3D效果，必须对父元素启用3D呈现 */
.outer{
   transform-style: preserve-3d;
}

.one{ transform: translateZ(100px); }

/* 使父元素旋转，带着子元素一起转 */
.outer:hover{
  transform: rotateY(60deg);
}

/* 让2号子元素拉得和1号元素远一点。 */
.two{ transform: translateZ(-100px); }

/* 添加一个边框，以便看到3者的关系 */
.outer{
  outline: 1px solid red;
}