两面盒子反转案例

最新推荐文章于 2024-05-13 09:49:10 发布

blink555

最新推荐文章于 2024-05-13 09:49:10 发布

阅读量962

点赞数 3

分类专栏： css3艺术

本文链接：https://blog.csdn.net/weixin_44325613/article/details/111660455

版权

css3艺术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

两面盒子反转案例

在这里插入图片描述

 <style>
        /* 旋转的是box */
        body {
            perspective: 600px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all 1s;

            /* 让背面的Pink盒子保持立体空间 */
            transform-style: preserve-3d;
        }

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


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

        .black {
            background-color: black;
            z-index: 1;

        }

        .pink {
            background-color: pink;
            /* 先按Y轴旋转  是其与black盒子背靠背 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="black">Jennie Kim</div>
        <div class="pink">Jisoo</div>
    </div>
</body>

思路

首先一个父盒子box,box中有两个子盒子，分别甚至不同的背景颜色，border-radius:50%变为圆形。使用定位absolute，盒子叠放在一起。
然后将提升黑色盒子的z-index,放置最上面，将粉色盒子Y轴旋转180度，将两个盒子变为背靠背状态
然后再按Y轴旋转父盒子.box180度，则看到的是粉色盒子的正面效果
给父盒子旋转的同时，要使用tranform-style:preserve-3d,使子盒子保持3d效果

blink555

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
两面盒子反转案例

两面盒子反转案例 <style> /* 旋转的是box */ body { perspective: 600px; } .box { position: relative; width: 300px; height: 300px; margin: 100px auto; transit
复制链接

扫一扫

专栏目录