css实现nav3D导航栏初始形态使用translate实现元素位移效果取值（正负均可）像素单位数值百分比（参照

初始形态

使用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>

最终效果

一般还是通过js实现,可在three.js查看