20：案例：翻转导航栏①3D平移②3D翻转③透视 perspective: 500px；④3D呈现 transform-style: preserve-3d；

最新推荐文章于 2021-12-13 19:26:30 发布

美美| ू•ૅω•́)ᵎᵎᵎ

最新推荐文章于 2021-12-13 19:26:30 发布

阅读量133

点赞数 1

分类专栏： html5 css3 提高

本文链接：https://blog.csdn.net/lazylYYY/article/details/119087134

版权

html5 css3 提高专栏收录该内容

19 篇文章 0 订阅

订阅专栏

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            margin-left: 50px;
            float: left;
            list-style: none;
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 50px;
            margin: 100px auto;
            text-align: center;
            line-height: 50px;
            transition: all .4s;
            transform-style: preserve-3d;
        }

        .a,
        .b {
            position: absolute;
            width: 200px;
            height: 50px;
            background-color: rgb(165, 44, 64);
        }

        .a {
            background-color: pink;
            z-index: 1;
            transform: translateZ(25px);
        }

        .b {
               /* 我们如果有移动 或者其他样式，必须先写我们的移动 */
            transform: translateY(25px) rotateX(-90deg);
        }

        .box:hover {
            transform: rotateX(90deg);
        }
    </style>
</head>

<body>

    <ul>
        <li>
            <div class="box">
                <div class="a">第一个盒子</div>
                <div class="b">第二个盒子</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="a">第一个盒子</div>
                <div class="b">第二个盒子</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="a">第一个盒子</div>
                <div class="b">第二个盒子</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="a">第一个盒子</div>
                <div class="b">第二个盒子</div>
            </div>
        </li>
    </ul>

</body>

美美| ू•ૅω•́)ᵎᵎᵎ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
20：案例：翻转导航栏①3D平移②3D翻转③透视 perspective: 500px；④3D呈现 transform-style: preserve-3d；

<style> * { margin: 0; padding: 0; } li { margin-left: 50px; float: left; list-style: none; perspective: 500px; } .box { ...
复制链接

扫一扫

专栏目录