3d导航栏

作者: 键盘已附魔 | 来源:发表于2021-09-14 22:45 被阅读0次

3d导航栏
swift-导航栏
iOS 状态栏(statusbar)导航栏(navigation
OC_导航栏 + iOS10
导航栏渐变隐现
Android隐藏和显示虚拟导航栏
适配iOS15导航栏，导航栏空白, 修改导航栏文字颜色
iOS 获取状态栏、导航栏、tabBar高度
iOS11 自定义导航栏衍生的几个问题（高度、间距等）
隐藏导航栏

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            margin: 100px;
        }
        
        li {
            float: left;
            width: 200px;
            height: 50px;
            list-style: none;
            margin-left: 20px;
            perspective: 500px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 50px;
            transform-style: preserve-3d;
            transition: all 0.5s;
        }
        
        .box:hover {
            transform: rotateX(90deg);
        }
        
        .yes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0f0;
            transform: translateZ(25px);
            z-index: 1;
        }
        
        .no {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: red;
            transform: translateY(25px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="yes">YES</div>
                <div class="no">NO</div>
            </div>
        </li>
        <li>

            <div class="box">
                <div class="yes">YES</div>
                <div class="no">NO</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="yes">YES</div>
                <div class="no">NO</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="yes">YES</div>
                <div class="no">NO</div>
            </div>
        </li>
    </ul>

</body>