我們經常看到當鼠標移到一個div或者圖片或者其他上的時候，就會切換到另外一個div上，並且是以90度旋轉效果，有點像現實中的旋轉門一樣，現在就簡單的寫下，看下是如何實現的吧。
<body>
<div class="box">
<div class="first">1111</div>
<div class="second">2222</div>
</div>
</body>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.first{
width: 100%;
height: 100%;
background-color: #3388FF;
}
.second {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
首先創建一個容器box，在裏面放了兩個div，first和second,通過定位將兩個div重合，並且將容器固定在屏幕的中間。
.first{
width: 100%;
height: 100%;
transform: rotateY(0deg);
background-color: #3388FF;
transition: 0.8s ease-in;
backface-visibility:hidden;
}
.second {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: rotateY(90deg);
background-color: #ff0066;
transition: 0.8s ease-in;
}
我們將第一個設爲0度，第二個設爲90度，這樣的話第二個就被隱藏掉了，同時設定了一個事件發生過程的時間爲0.8秒。
.box:hover .first{
transform: rotateY(-90deg);
}
.box:hover .second{
transform: rotateY(0deg);
}
添加了hover事件，使first消失，second出現，這個時候我們發現兩個div之間實現了切換，但是都是在同一個平面發生的，缺少立體效果，我們可以通過添加 perspective屬性來實現。下面就是整個的完整代碼了。
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid;
position: absolute;
perspective: 1000px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.first{
width: 100%;
height: 100%;
transform: rotateY(0deg);
background-color: #3388FF;
transition: 0.8s ease-in;
backface-visibility:hidden;
}
.second {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: rotateY(90deg);
background-color: #ff0066;
transition: 0.8s ease-in;
}
.box:hover .first{
transform: rotateY(-90deg);
}
.box:hover .second{
transform: rotateY(0deg);
}