前端小案例之3D導航欄

阿新 • • 發佈：2020-12-23

簡單3D導航欄案例-滑鼠經過盒子時底部盒子旋轉

最近入門學習前端用簡單的html結構加CSS樣式寫了個3D導航欄的小案例在這裡分享給大家。

文章目錄

- 簡單3D導航欄案例-滑鼠經過盒子時底部盒子旋轉
一、案例介紹？
二、案例程式碼
- 1.HTML結構
- 2.CSS樣式
總結

一、案例介紹？

效果如下:
在這裡插入圖片描述

該案例主要是在一個navbar導航欄的盒子裡面放幾個li，每個li裡面包含一個span便籤和一個連結，這個span標籤是初始正對著我們的，當我們用滑鼠經過這個li下面的span時，就把下面的a便籤也就是連結旋轉上來並且可以對連結進行設定需要跳轉到哪個介面。

二、案例程式碼

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;
}