两面翻转的盒子（解决转后不显示问题）

最新推荐文章于 2024-06-07 07:33:35 发布

周百万.

最新推荐文章于 2024-06-07 07:33:35 发布

阅读量1.1k

点赞数 10

本文链接：https://blog.csdn.net/m0_45142186/article/details/123408924

版权

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

编程

19 篇文章 1 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

如图所示：鼠标一碰到盒子，盒子就会翻转！

重点来了，很多小伙伴会发现盒子转动后不显示后面的盒子：需要在".front" 标签上加

backface-visibility: hidden;

加上这行代码就可以啦！

代码如下：

 <style>
        .box {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            font-size: 35px;
            color: #fff;
            line-height: 300px;
            text-align: center;
            transition: all .5s linear;
            transform-style: preserve-3d;
        }
        
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        
        .front {
            z-index: 1;
            background-color: pink;
            transition: all .4s;
            backface-visibility: hidden;
        }
        
        .back {
            background-color: purple;
            transform: rotateY(180deg);
        }
        
        .box:hover {
            transform: rotateY(180deg);
        }
        /* .box:hover .front {
            z-index: -1;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="back">万事如意！</div>
        <div class="front">新年快乐！</div>
    </div>
</body>

周百万.

关注

10
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
两面翻转的盒子（解决转后不显示问题）

如图所示：鼠标一碰到盒子，盒子就会翻转！重点来了，很多小伙伴会发现盒子转动后不显示后面的盒子：需要在".front" 标签上加backface-visibility: hidden;加上这行代码就可以啦！代码如下： <style> .box { position: relative; margin: 100px auto; width: 300px; heig..
复制链接

扫一扫