SOURCE

console 命令行工具 X clear

                    
>
console
		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);
<ul class="test-3d">
</ul>
.test-3d {
  outline: 1px solid red;
  width: 100px;
  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;
}