SOURCE

    let outer = document.querySelector(".test-3d");
    outer.innerHTML = Array(6).fill("<li>").join("");/*填仓子元素 个数是动态的*/
    setTimeout(function () {
        let preDeg, translateZ;
        Array.from(document.querySelectorAll(".test-3d>li")).forEach(function (ele, i, all) {
            preDeg = 360 / all.length;
            translateZ = (ele.clientWidth / 2) / Math.tan((preDeg / (2 * 180)) * Math.PI);
            ele.style.transform = `rotateY(${preDeg * i}deg) translateZ(${translateZ * 1.5}px)`;
            ele.innerHTML = i;
        })
    }, 100);

    (function () {
        let deg = 0;
    
        function run() {
            deg++;
            outer.style.transform = `perspective(1000px) rotateX(-30deg) rotateY(${deg}deg) rotateZ(0deg)`;
            requestAnimationFrame(run)
        }

        requestAnimationFrame(run);
    })()	

<ul class="test-3d">
</ul>

    .test-3d {
        outline: 1px solid red;
        width: 300px;
        height: 50px;
        margin: 100px auto;
        /*perspective: 1000px;*/
        transform-style: preserve-3d;
        background: lightcoral;
        /*backface-visibility: hidden;*/

        transform: perspective(1000px) rotateX(-30deg) rotateY(30deg) rotateZ(0deg); /*立体效果*/
        /*transform: perspective(1000px) rotateX(30deg) rotateY(0deg) rotateZ(30deg); !*立体效果*!*/
    }
    .test-3d > li {
        list-style: none!important;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto; /*绝对居中*/

        outline: 1px solid red;
        width: 100px;
        height: 100px;

        transform: rotateY(0deg) translateZ(0px);
        transition: transform 1s ease-in-out;

    }