css 实现两面翻转

html

    <div>
        <p class="img1">456456</p>
        <p class="img2">123123</p>
    </div>

css

      * {
            margin: 0;
            padding: 0;
        }
        div:hover {
            transform: rotateY(180deg);
        }
        div {
            position: relative;
            width: 300px;
            height: 200px;
            transition: 2s;
            transform-style: preserve-3d; /* 3d才能实现效果哟 */
        }
        div p {
            line-height: 200px;
            text-align: center;
            font-size: 70px;
            backface-visibility: hidden; /*背面隐藏*/
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
        }
        .img2 {
            transform: rotateY(180deg);
        }

END，感谢阅读！欢迎评论区留言讨论~