簡單3D導航欄案例-鼠標經過盒子時底部盒子旋轉
最近入門學習前端用簡單的html結構加CSS樣式寫了個3D導航欄的小案例在這裏分享給大家。一、案例介紹？
效果如下:
二、案例代碼
1.HTML結構
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="navbar">
<li>
<div class="case">
<span class="front">首頁</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面1</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面2</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面3</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面4</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面5</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面6</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面7</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面8</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面9</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面10</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面11</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子頁面12</span>
<a href="#" class="bottom">進入</a>
</div>
</li>
</ul>
</body>
</html>
2.CSS樣式
代碼如下：
/* 清除內外邊距 */
* {
margin: 0;
padding: 0;
}
.navbar {
width: 1200px;
height: 34px;
margin: 100px auto;
border: 1px solid rgba(0, 0, 0, .3);
/* 邊框設置 */
border-radius: 10px;
}
.navbar li {
float: left;
margin: 0 5px;
width: 80px;
height: 34px;
font-size: 13px;
list-style: none;
/* 讓li下面的子盒子都有透視效果 */
perspective: 600px;
}
.navbar li a {
/* 去除進入鏈接下面的下劃線 */
text-decoration: none;
}
.case {
position: relative;
width: 100%;
height: 100%;
/* 使得子盒子上的文字都居中顯示 */
text-align: center;
line-height: 34px;
/* 由於子級元素設置了3D效果，如果父級這裏不加這個屬性的話子級的3D效果就不會顯示出來 */
transform-style: preserve-3d;
/* 加一個旋轉的過渡效果 */
transition: all .6s;
}
.case:hover {
/* 經過盒子則旋轉90度顯示下方的盒子 */
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.front {
/* z-index 屬性指定一個元素的堆疊順序，讓需要初始顯示的盒子堆疊順序更高。 */
z-index: 1;
/* 往我們的面前移動所以是正的並且移動盒子高度的一半使得可以繞着中心點旋轉 */
transform: translateZ(17px);
color: #666;
}
.bottom {
/* 往前倒必須是負值因爲旋轉上去底部的盒子字體要是正對我們的 */
/* 往下走高度的一半 */
/* 如果有移動或者其他的樣式必須先寫我們的移動 */
transform: translateY(17.5px) rotateX(-90deg);
color: orange;
}
這裏是結構與樣式分離將上面的CSS樣式命名爲style.css然後用link導入到html文件中即可以用，也可以將樣式用style標籤寫到html文件裏的title下。