正反两面不同图片

* {
            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;
            /*提前将前面的图片旋转到背面*/
            transform: rotateY(180deg);
        }
        .son::after {
            background-position: left top;
            /*将背面的图片不能看到背面和看到是一样的*/
            backface-visibility: visible;
        }
        .son:hover {
            /*此时整个容器旋转180，刚好将之前旋转的180抵消，所以看到的是正面而不是镜像*/
            transform: rotateY(180deg);
        }

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