一天一代码之CSS3动画(反转标签)

CSS效果图如下:

CSS源代码如下:

 body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 200px auto;
            transform-style: preserve-3d;
            transition: all 1s;
        }
        
        .box:hover {
            /* 一定要给box添加旋转 */
            transform: rotateY(180deg);
        }
        
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 200px;
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        }
        
        .front {
            background-color: #FF577B;
        }
        
        .back {
            background-color: #FFDB47;
            /* 这里先让这两个圆背靠背显示 */
            transform: rotateY(180deg);
        }

HTML源代码如下:

  <div class="box">
        <div class="front">你没有女朋友</div>
        <div class="back">你是还没有女朋友</div>
    </div>

如有疑问欢迎评论区评论