3D导航栏

最新推荐文章于 2024-11-23 22:52:30 发布

Bunury

最新推荐文章于 2024-11-23 22:52:30 发布

阅读量352

点赞数 10

分类专栏： Css 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/weixin_49352307/article/details/136738085

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前面那个面需要向前移动盒子的一半创建立体空间，才能使整个盒子旋转90度后能全部覆盖住

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">8989</div>
                <div class="bottom">WOAINA</div>
            </div>
        </li>
    </ul>
</body>

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

        ul {
            width: 520px;
            background-color: antiquewhite;
            display: flex;
            justify-content: space-between;
            margin: 100px;
        }

        ul li {
            width: 120px;
            height: 35px;
            perspective: 500px;
            list-style: none;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 1S;
        }

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

        .front,
        .bottom {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 35px;
        }

        .front {
            background-color: pink;
            transform: translateZ(17.5px);
            z-index: 1;
        }

        .bottom {
            background-color: blue;
            transform: translateY(17.5px) rotateX(-87deg);
        }
    </style>