css实现nav3D导航栏_css nav-CSDN博客

本文链接：https://blog.csdn.net/vGuYi/article/details/124730386

这篇博客介绍了如何利用CSS3的translate和rotate属性来实现一个3D导航栏的效果。主要内容包括translate的像素和百分比单位应用，以及rotate的角度控制，通过正负角度实现元素的顺时针和逆时针旋转。示例代码展示了如何设置CSS样式以达到预期的3D转换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始形态

使用translate实现元素位移效果

取值（正负均可）

像素单位数值

百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧

translate()如果只给出一个值, 表示x轴方向移动距离

单独设置某个方向的移动距离：translateX() & translateY()

使用rotate实现元素旋转效果

语法

transform: rotate(角度);

注意：角度单位是deg

技巧：取值正负均可

取值为正, 则顺时针旋转

取值为负, 则逆时针旋转

html

</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span>首页</span>
                    <span>index</span>
                </a>

            </li>
            <li><a href="#">
                    <span>首页</span>
                    <span>index</span>
                </a></li>
            <li><a href="#">
                    <span>首页</span>
                    <span>index</span>
                </a></li>
        </ul>
    </div>
</body>

</html>

css

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 800px;
            width: 800px;
            margin: 300px auto;
        }


        ul {
            list-style-type: none;
        }

        ul li {

            float: left;
            margin-right: 30px;
        }

        ul li a {
            position: relative;
            display: block;
            width: 200px;
            height: 60px;
            text-decoration: none;
            color: white;
            /* 添加3D效果 */
            transform-style: preserve-3d;
            /* 添加过渡效果 */
            transition: all 0.5s;
        }

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

        li a span {
            /* 用绝对定位使两个盒子重叠在一起 */
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
        }

        li a span:first-child {
            /* Z轴平移使绿色覆盖到橙色上面 */
            transform: translateZ(30px);
            background-color: green;
        }

        li a span:last-child {
            /* Y轴平移后再X轴旋转90度 */
            transform: translateY(-30px) rotateX(90deg);
            background-color: orange;
        }
    </style>

最终效果