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才能實(shí)現(xiàn)效果喲 */
        }
        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，感謝閱讀！歡迎評(píng)論區(qū)留言討論~