CSS3实战 - 3d转换 - 3d 导航

最新推荐文章于 2024-10-01 21:51:05 发布

Jepson_鹏鹏

最新推荐文章于 2024-10-01 21:51:05 发布

阅读量457

点赞数 1

分类专栏： CSS3 文章标签： css3 3d 导航

本文链接：https://blog.csdn.net/qq_16415157/article/details/53194012

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3实战 - 3d转换 - 3d 导航练习，感兴趣的可以参考，效果如下：
这里写图片描述

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3 3D转换</title>
        <style>
            body,ul {
                margin: 0;
                padding: 0;
                background-color: #F7F7F7;
            }
            .nav {
                color: white;
                font-family: '微软雅黑';
                list-style: none;
            }

            .nav li {
                float: left;
                width: 100px;
                height: 40px;
                /* 渐变 */
                transition:all 1s;
                /* 使子元素具有 3d  */
                transform-style: preserve-3d;
            }

            .nav li span {
                width: 100px;
                height: 40px;
                position:absolute;
                left:0;
                top:0;
                text-align: center;
                line-height: 40px;
            }

            .nav li span:nth-child(1) {
                background: blue;
                /* 第一个元素 向前 */
                transform: translateZ(20px);
            }

            .nav li span:nth-child(2) {
                background: green;
                /* 第二个元素 转到上面, 旋转的时候坐标轴会跟着变换 */
                transform: rotateX(90deg) translateZ(20px);
            }

            /* 鼠标hover li 元素 负方向旋转 90 */
            .nav li:hover {
                transform: rotateX(-90deg);
            }

        </style>
    </head>
    <body>
        <ul class="nav">
            <li>
                <span>首页</span>
                <span>首页</span>
            </li>
            <li>
                <span>首页</span>
                <span>首页</span>
            </li>
            <li>
                <span>首页</span>
                <span>首页</span>
            </li>
        </ul>
    </body>
    </html>