* {
            margin: 0;
            padding: 0;
        }
        .parent {
            height: 400px;
            margin:50px auto;
            background-color: #ccc;
        }
        .son {
            width: 300px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            transition: all 1s;
            margin: 0 auto;
        }
        .son::after,.son::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background: url(./images/bg.png);
        }
        .son::before {/*這里將before放在背面*/
            background-position: right top;
            /*提前將前面的圖片旋轉(zhuǎn)到背面*/
            transform: rotateY(180deg);
        }
        .son::after {
            background-position: left top;
            /*將背面的圖片不能看到背面和看到是一樣的*/
            backface-visibility: visible;
        }
        .son:hover {
            /*此時(shí)整個(gè)容器旋轉(zhuǎn)180，剛好將之前旋轉(zhuǎn)的180抵消，所以看到的是正面而不是鏡像*/
            transform: rotateY(180deg);
        }

<div class="parent">
        <div class="son"></div>
    </div>