纯css实现3d导航栏效果

tanzhongfa2

[HTML] 纯文本查看 复制代码

css源码
* {
            padding: 0;
            margin: 0;
        }
        body {
            perspective: 300px;
        }
        .box {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 100px auto;
            transform-style: preserve-3d;
            transition: all 0.4s;
        }
        .front,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .front {
            background-color: pink;
            transform: translateZ(50px);
        }
        .bottom {
            background-color: aqua;
            transform: translateY(50px) rotateX(-90deg);
        }
        .box:hover {
            transform: rotateX(90deg);
        }
html源码
<div class="box">
        <div class="front">我是谭忠发</div>
        <div class="bottom">我很帅</div>
    </div>

rz66

怎么不上图呢，有图有影响力啊。呵呵，我是沙发吗？

tanzhongfa2

rz66 发表于 2022-3-15 13:55
怎么不上图呢，有图有影响力啊。呵呵，我是沙发吗？

这上面没办法发动图好像