导航栏翻转效果

3D翻转导航菜单

最新推荐文章于 2023-02-22 15:10:36 发布

没有风雨怎能远方

最新推荐文章于 2023-02-22 15:10:36 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： css3 web前端导航栏3d翻转 html

本文链接：https://blog.youkuaiyun.com/yyf0409/article/details/77530871

WEB前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的3D翻转效果的导航菜单，通过鼠标悬停触发翻转动画来显示不同的链接选项。此设计不仅美观且具有良好的交互体验。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 30px 40px;
        }

        li {
            width: 190px;
            height: 50px;
            list-style: none;
            float: left;
            border: 1px solid #ccc;
            position: relative;
            /*perspective: 900px;*/
            transform-style: preserve-3d;
        }
        
        .blackdiv {
            width: 100%;
            height: 100%;
            background-color: #000000;

            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 50% 0%;
            transform: rotateX(90deg) translateZ(25px);
            transition: transform 0.4s;
        }

        li:hover .blackdiv {
            transform: rotateX(0deg);
        }

        li:hover .whitediv {
            transform: rotateX(90deg);
        }

        .whitediv {
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 50% 100%;
            transform: rotateX(0deg) translateZ(22px);
            transition: transform 0.4s;
        }
        .blackdiv a{
            text-decoration:none;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 40px;
            margin-left: 10px;
            font-weight: bolder;
        }
        .whitediv a{
            text-decoration:none;
            font-size: 14px;
            color: #000000;
            margin-left: 10px;
            line-height: 40px;
            font-weight: bolder;
        }
    </style>
</head>
<body>

<ul class="nav">
    <li>
        <div class="blackdiv"><a href="tool.html">TOOL</a></div>
        <div class="whitediv"><a href="tool.html">TOOL</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="work.html">WORK</a></div>
        <div class="whitediv"><a href="work.html">WORK</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="vr-360.html">VR/360</a></div>
        <div class="whitediv"><a href="vr-360.html">VR/360</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="DIRECTORS.html">DIRECTORS</a></div>
        <div class="whitediv"><a href="DIRECTORS.html">DIRECTORS</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="AWARDS.html">AWARDS</a></div>
        <div class="whitediv"><a href="AWARDS.html">AWARDS</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="ABOUT.html">ABOUT</a></div>
        <div class="whitediv"><a href="ABOUT.html">ABOUT</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="CONTACT.html">CONTACT</a></div>
        <div class="whitediv"><a href="CONTACT.html">CONTACT</a></div>
    </li>
</ul>

</body>
</html>