如何實現hover事件中旋轉門的切換效果
阿新 • • 發佈：2018-12-15
我們經常看到當滑鼠移到一個div或者圖片或者其他上的時候，就會切換到另外一個div上，並且是以90度旋轉效果，有點像現實中的旋轉門一樣，現在就簡單的寫下，看下是如何實現的吧。
<div class="box">
<div class="first">aaaa</div>
<div class="second">bbbb</div>
</div>
*{ 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屬性來實現。下面就是整個的完整程式碼了。`
<style> *{ 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); } </style> <body> <div class="box"> <div class="first">aaaa</div> <div class="second">bbbb</div> </div> </body>
`