css3-3D翻折菜单导航效果

css3-3D翻折菜单导航效果

案例知识点

transform-style: preserve-3d;

text-transform: capitalize;

color: transparent;

transform-style: preserve-3d;

transition: 0.3s;

transform: rotateX(90deg) translateY(60px);

transform-origin: bottom;

 transform-style: preserve-3d;

transition: 0.3s;

transform: rotateX(0deg) translateY(0px);

transform-origin: top;

transform: rotateX(0deg) translateY(0px);

transform: rotateX(90deg) translateY(-20px);

content: attr(title);

html:

    <!-- ul>li*5>a[href="javascript:;"]+span[title="home"]{home} -->
    <ul>
        <li><a href="javascript:;"></a><span title="home">网站首页</span></li>
        <li><a href="javascript:;"></a><span title="home">技术研发</span></li>
        <li><a href="javascript:;"></a><span title="home">客户案例</span></li>
        <li><a href="javascript:;"></a><span title="home">新闻中心</span></li>
        <li><a href="javascript:;"></a><span title="home">联系我们</span></li>
    </ul>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #c2b5fa;
            overflow: hidden;
        }
        .list{
            background-color: #fff;
            width: 600px;
            display: flex;
            position: relative;
            top: -10%;
            box-shadow: 0 0 200px rgba(145,121,250,1);
        }
        .list li{
            transform-style: preserve-3d;
        }
        .list li a{
            color: #262626;
            font-size: 16px;
            text-transform: capitalize;
            text-decoration: none;
            font-weight: bold;
            display: block;
            position: relative;
        }
        .list li a span{
            display: block;
            width: 120px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: transparent;
            position: relative;
        }
        .list li a span::after{
            content: attr(title);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #9179fa;
            color: #fff;
            transform-style: preserve-3d;
            transition: 0.3s;
            transform: rotateX(90deg) translateY(60px);
            transform-origin: bottom;
        }
        .list li a span:hover::after{
            transform: rotateX(0deg) translateY(0px);
        }
        .list li a span::before{
            content: attr(title);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            color: #000;
            transform-style: preserve-3d;
            transition: 0.3s;
            transform: rotateX(0deg) translateY(0px);
            transform-origin: top;
        }
        .list li a span:hover::before{
            transform: rotateX(90deg) translateY(-20px);
        }
    </style>