导航栏触碰翻转

最新推荐文章于 2024-10-02 15:35:50 发布

下课别走

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量162

点赞数

分类专栏： Html 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_42862167/article/details/130017189

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏触碰翻转</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        nav{
            margin: 100px 200px;
        }
        nav>ul{
            display: flex;
        }

        nav>ul>li{
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            transition: all 5s linear;
            transform-style: preserve-3d;
        }

        nav>ul>li>a{
            display: block;
            width: 100px;
            height: 40px;
            color: #000;
            text-decoration: none;
        }

        nav>ul>li:hover{
            transform: rotateX(-90deg);
        }

        nav>ul>li>a.en{
            transform: translateY(-60px) rotateX(90deg);
            background-color: orange;
        }

        nav>ul>li>a.cn{
            transform: translateZ(20px);
            background-color: green;
        }

    </style>
</head>
<body>
     <nav>
        <ul>
            <li>
                <a href="#" class="cn">主页</a>
                <a href="#" class="en">index</a>
            </li>
            <li>
                <a href="#" class="cn">登录</a>
                <a href="#" class="en">login</a>
            </li>
            <li>
                <a href="#" class="cn">注册</a>
                <a href="#" class="en">register</a>
            </li>
        </ul>
     </nav>
</body>
</html>