css3制作俩面翻转盒子效果

html

<section class="box">
        <div class="back">永远的神</div>
        <div class="front">吉吉国王</div>
    </section>

css

* {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
            /* 自绝父相 */
            width: 100px;
            height: 100px;
            margin: 100px auto;
            text-align: center;
            border-radius: 50%;
            line-height: 100px;
            transition: all 1s;
            transform-style: preserve-3d;
            /* 3d呈现，让背后盒子立体呈现，不然永远是前面一个盒子朝向我们 */
            cursor: pointer;
            animation: rotate 2s linear infinite forwards;

        }

        .box>div {
            position: absolute;
            top: 0;
            /* 让子盒子重叠一起 */
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .front {
            background: blue;
        }

        .back {
            background: blueviolet;
            transform: rotateY(180deg);
            /* 这里让back盒的先翻转180在front的后面 */
        }

        .box:hover {
            animation-play-state: paused;
            /* 悬停事件，使得整个父盒子旋转动画停止 */
        }

        @keyframes rotate {
            from {
                transform: rotateY(0);
            }

            to {
                transform: rotateY(360deg);
            }
        }