css3两面翻转盒子

小菜团子

已于 2022-07-06 13:08:30 修改

阅读量648

点赞数 1

文章标签： css3 css html

于 2022-03-10 14:14:48 首次发布

本文链接：https://blog.csdn.net/m0_52074342/article/details/123400245

版权

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;

        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间 给父级添加的 */
            transform-style: preserve-3d;

        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }

        .front {
            background-color: rgb(152, 192, 219);
            /* transform: rotateY(180deg); */
            z-index: 1;
            /* 背面隐藏 背面朝向用户时不可见 默认值是visible(可见) */
            backface-visibility: hidden;
        }

        /* 因为前面提高了蓝色盒子的显示优先级，所以要降低它的显示优先级紫色盒子才能显示出来 
        但是这种方法做出来的效果不是很好看，所以不用。
        直接在front盒子中加入backface-visibility: hidden;即可*/
        /* .front:hover {
            z-index: -1;
        } */

        .back {
            background-color: rgb(231, 200, 231);
            /* 让两个盒子变成背靠背的形式，这时翻转才能翻到另外一个盒子的页面 */
            transform: rotateY(180deg);

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">翻开看看</div>
        <div class="back">这里什么也没有</div>
    </div>
</body>

</html>

效果图：

小菜团子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
css3两面翻转盒子

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫