HTML+CSS實現選單的3D翻轉特效

揚帆起航，成就夢想發表於2020-12-27
HTMLCSS3D特效

HTML+CSS實現選單的3D翻轉特效
效果圖如下：
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
HTML部分原始碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻轉特效</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
        <div class="item">
            <a href="#">
                <p class="cn">首頁</p>
                <p class="en">INDEX</p>
            </a>
        </div>
        <div class="item">
            <a href="#">
                <p class="cn">部落格</p>
                <p class="en">BLOG</p>
            </a>
        </div>
        <div class="item">
            <a href="#">
                <p class="cn">關於</p>
                <p class="en">ABOUT</p>
            </a>
        </div>
    </nav>
</body>

</html>

CSS部分原始碼如下：

:root {
    --background-color: #2c3e50;
    --color1: #7591AD;
    --color2: #9729ad;
    --color3: #db2159;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

nav {
    width: 680px;
    background-color: var(--color1);
}

.item {
    width: 200px;
    height: 100px;
    margin: 10px;
    float: left;
    perspective: 4000px;
}

.item a {
    display: block;
    height: 100px;
    text-decoration: none;
    color: #fff;
    font-size: 1.5em;
    /* 開啟3d */
    transform-style: preserve-3d;
    /* 通過變換角度可以發現剛才的夾角好像一個開啟的膝上型電腦 */
    /* transform: rotateX(10deg) rotateY(10deg) translateZ(50px); */
    /* 增加z軸上的位移主要是為了讓hover旋轉式沿著夾角形成的 */
    /* 虛擬立方體中心軸旋轉而不是當前cn元素的這一面的中心 */
    transform: translateZ(50px);
    transition: 0.5s;
}

.item a p {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.item a p.cn {
    background-color: var(--color2);
}

.item a p.en {
    background-color: var(--color3);
    /* en元素沿頂端x軸逆向旋轉90度
    形成於cn元素垂直的夾角，類似於形成一個缺兩面的正方體
    */
    transform: rotateX(-90deg);
    transform-origin: top;
}

.item a:hover{
    /* 當滑鼠移動到a元素時旋轉，沿X軸旋轉順時針90度 */
    /* 因為當前旋轉基點在夾角形成的虛擬正方體的中心，所有看起來就像旋轉
    立方體的兩個面一樣 */
    /* 出現偏移問題是因為順序原因，具體的後續查了下文件發現，變換動作的
    順序會影響最終呈現的效果 */
    transform: rotateX(90deg) translateZ(50px) ;
}

相關文章