圖解正方體旋轉的translate3D原理

如何寫出一個正方體？

<ul class="box">
            <li><img src="cube1.png" alt=""></li>
            <li><img src="cube2.png" alt=""></li>
            <li><img src="cube3.png" alt=""></li>
            <li><img src="cube4.png" alt=""></li>
            <li><img src="cube5.png" alt=""></li>
            <li><img src="cube6.png" alt=""></li>
</ul>


----------
 //3D 效果
  perspective: 2000px;//視距
  .box{
    width:5rem;
    height:5rem;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg);//初始位置旋轉必定的角度以便看到立體效果
  
    li{
      &:nth-child(1){//前面 面對着你來說
        transform: translateZ(2.5rem);
      }
      &:nth-child(2){//後面
        transform: translateZ(-2.5rem) rotateY(180deg);
      }
      &:nth-child(3){//左面
        transform: translateX(-2.5rem) rotateY(-90deg);
      }
      &:nth-child(4){//右面
        transform: translateX(2.5rem) rotateY(90deg);
      }
      &:nth-child(5){//上面
        transform: translateY(-2.5rem) rotateX(90deg);
      }
      &:nth-child(6){//下面
        transform: translateY(2.5rem) rotateX(-90deg);
      }

    }
  }

圖解旋轉原理