css 实现旋转照片墙自动旋转

<style>
    * {
        margin: 0;
        padding: 0;
    }
    :root,
    html,
    body {
        height: 100%;
        width: 100%;
    }
    body {
        perspective: 3000px;
        transform-style: preserve-3d;
    }
    @keyframes imgRun {
        0% {
            transform: translate(-50%, -50%) rotateY(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotateY(360deg);
        }
    }
    .wrapper {
        width: 150px;
        height: 250px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-style: preserve-3d;
        animation: imgRun 20s linear infinite;
    }
    .wrapper .img-div {
        background-repeat: no-repeat;
        background-size: cover;
        width: 150px;
        height: 100%;
        position: absolute;
    }
    .wrapper .img-div:nth-of-type(1) {
        background-image: url('img/1.jpg');
        transform: rotateY(36deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(2) {
        background-image: url('img/2.jpg');
        transform: rotateY(72deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(3) {
        background-image: url('img/3.jpg');
        transform: rotateY(108deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(4) {
        background-image: url('img/4.jpg');
        transform: rotateY(144deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(5) {
        background-image: url('img/5.jpg');
        transform: rotateY(180deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(6) {
        background-image: url('img/6.jpg');
        transform: rotateY(216deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(7) {
        background-image: url('img/7.jpg');
        transform: rotateY(252deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(8) {
        background-image: url('img/8.jpg');
        transform: rotateY(288deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(9) {
        background-image: url('img/9.jpg');
        transform: rotateY(324deg) translateZ(300px);
    }
    .wrapper .img-div:nth-of-type(10) {
        background-image: url('img/10.jpg');
        transform: rotateY(360deg) translateZ(300px);
    }
</style>

<div class="wrapper">
    <div class="img-div"></div>
    <div class="img-div"></div>
    <div class="img-div"></div>
    <div class="img-div"></div>
    <div class="img-div"></div>
    <div class="img-div"></div>
    <div class="img-div"></div>
    <div class="img-div"></div>
    <div class="img-div"></div>
    <div class="img-div"></div>
</div>
(function () {
    // 鼠标移动改变看到3d的位置
    document.body.onmousemove = function (e) {
        this.style.perspectiveOrigin = "" + e.pageX  + "px " + e.pageY  + 'px';
    }
})()