图解正方体旋转的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);
      }

    }
  }

图解旋转原理