今天玩了下 css 3D 旋轉，順便寫了一個小 Demo
隻寫了一個 hover 向上翻轉的，其他效果基本類似，就沒多寫，了解原理即可，可自行擴充。
- 先簡單貼個效果圖
- 直接上代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3D盒子旋轉Demo</title>
<style>
.rotate-box {
height: 137px;
width: 286px;
overflow: hidden; /* 隐藏翻轉上去和翻轉下去的圖檔 */
}
.rotate-inner {
transition: all .4s ease;
perspective: 428px; /* 重點屬性，定義 3D 元素距視圖的距離，有他才有3D效果 */
-webkit-perspective: 428px;
}
.rotate-inner .top-block,
.rotate-inner .bottom-block {
backface-visibility: hidden; /* 輔助屬性-屬性定義當元素不面向螢幕時是否可見，如果在旋轉元素不希望看到其背面時，該屬性很有用 */
transition: all .4s ease;
-webkit-backface-visibility: hidden;
-webkit-transition: all .4s ease;
width: 286px;
height: 137px;
}
.rotate-inner .top-block {
transform-origin: bottom; /* 旋轉軸線位置 */
-webkit-transform-origin: bottom;
transform: rotateX(0deg); /* 預設旋轉角度 */
-webkit-transform: rotateX(0deg);
background-color: blue;
}
.rotate-inner .bottom-block {
transform-origin: top; /* 旋轉軸線位置 */
-webkit-transform-origin: top;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
background-color: #777;
}
.rotate-box:hover .rotate-inner {
margin-top: -137px; /* 旋轉後上移，把下面的block顯示，上面的隐藏 */
}
.rotate-box:hover .rotate-inner .top-block {
transform: rotateX(90deg); /* 旋轉後角度 */
-webkit-transform: rotateX(90deg);
}
.rotate-box:hover .rotate-inner .bottom-block {
transform: rotateX(0);
-webkit-transform: rotateX(0);
}
</style>
</head>
<body>
<div class="rotate-box">
<div class="rotate-inner">
<div class="top-block"></div>
<div class="bottom-block"></div>
</div>
</div>
</body>
</html>
- 其實就是兩個塊上下堆放，外層設定超出隐藏，然後把上面的塊沿X軸底部旋轉，下面的沿X軸頂部旋轉，最後相當于下面的呈現出來了，上面的又隐藏掉了
- 重點是perspective屬性，定義 3D 元素距視圖的距離，有他才有3D效果
感興趣的小夥伴可以自己去拓展下
覺得有用的小夥伴右上角點個贊支援一下~ 
css 3D 旋轉 - Demo覺得有用的小夥伴右上角點個贊支援一下~掃描上方二維碼關注我的訂閱号~