首页 > 代码库 > 3D案例，导航，导航升级版

3D案例，导航，导航升级版

2024-08-25 01:00:23   220人阅读

技术分享

 

/*****************************百度钱包旋转变内容******************************/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>百度钱包旋转变内容</title>
        <style>
            .wallet{
                width: 300px;
                height:300px ;
                margin: 50px auto;
                position: relative;

                transition: all 8s;

                transform-style:preserve-3d;   /* 加了之后父盒子就真正3D*/
            }
            .wallet::before, .wallet::after{
                content: ‘‘;
                display: block;
                position: absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                /*right:0;
                bottom:0;*/
                background: red;
            }
            .wallet::before{
                background: #33ffca;        /*可更换为图片*/
                transform: translateZ(-5px);
                /*子元素必须是转换元素，eg两个平面必须要有距离，才起作用transform-style:preserve-3d;*/
            }
            .wallet::after{
                background: #3598db;        /*可更换为图片*/
                transform: translateZ(5px);  /*可以更改两个平面Z距离*/
            }
            .wallet:hover{
                transform: rotateY(180deg);        /*顺时针180*/
            }
        </style>
    </head>
    <body>
    <div class="wallet">
    </div>
    </body>

</html>

技术分享

 

 

/*****************************3D导航******************************/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3D导航</title>
        <style>
            body{
                margin: 0;
                padding:0;
                font-family: "Agency FB";
                background: #f7f7f7;
            }
            .nav{
                height:40px;
                margin-top: 50px;
                text-align: center;
                list-style: none;
            }
            li{
                width:120px ;
                height: 40px;
                line-height: 40px;
                float: left;

                position: relative;

                -webkit-transition: all 1s;

                transform-style:preserve-3d;   /*加了之后父盒子就真正3D*/
            }
            li span{
                position: absolute;
                top:0;
                left: 0;
                width:100%;
                height:100%;
            }
            li span:first-child{
                background: yellow;
                transform:rotateX(90deg) translateZ(20px);
            }
            li span:last-child{
                background: #3598db;
                transform: translateZ(20px);
            }
            li:hover{
                transform: rotateX(-90deg);   /*旋转整个标签*/
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
        </ul>
    </body>

</html>

 

技术分享

 

/*****************************3D导航升级->3D轮播图******************************/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3D导航升级->3D轮播图</title>
        <style>
            body{
                margin: 0;
                padding:0;
                font-family:"微软雅黑";
                background: #f7f7f7;
            }
            .nav{
                height:40px;
                margin-top: 50px;
                text-align: center;
                list-style: none;
            }
            li{
                width:120px ;
                height: 40px;
                line-height: 40px;
                float: left;

                position: relative;

                -webkit-transition: all 1s;

                transform-style:preserve-3d;   /*加了之后父盒子就真正3D*/
            }
            li span{
                position: absolute;
                top:0;
                left: 0;
                width:100%;
                height:100%;
            }
            li span:first-child{
                background: yellow;
                transform:rotateX(90deg) translateZ(20px);
            }
            li span:last-child{
                background: #3598db;
                transform: translateZ(20px);
            }



            /*旋转整个li标签*/
            /*li:hover{
                transform: rotateX(-90deg);
            }*/




            /*旋转整个ul标签*/
            /*类似3D轮播图*/
            .nav:hover li{
                transform: rotateX(-90deg);
            }
            .nav li:nth-child(1){
                transition-delay: 0s;   /*延迟0s*/
            }
            .nav li:nth-child(1){
                transition-delay: 0.2s;   /*延迟0s*/
            }
            .nav li:nth-child(2){
                transition-delay: 0.4s;   /*延迟0s*/
            }
            .nav li:nth-child(3){
                transition-delay: 0.6s;   /*延迟0s*/
            }
            .nav li:nth-child(4){
                 transition-delay: 0.8s;   /*延迟0s*/
             }
            .nav li:nth-child(5){
                  transition-delay: 1s;   /*延迟0s*/
              }

        </style>
    </head>
    <body>
        <ul class="nav">
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
            <li>
                <span>3D样式导航</span>
                <span>轻轻走143</span>
            </li>
        </ul>
    </body>

</html>

 

技术分享

【作者】：轻轻走143
【出处】：http://www.cnblogs.com/qingqingzou-143/
【声明】：所有博文标题后加（share）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！

 

3D案例，导航，导航升级版


联系
我们