<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <ul class="large">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
ul{
  list-style:none;
  margin:150px auto 0;
  width:100px;
  height:100px;
  position:relative;
  transform-origin:50% 50% -50px;
  perspective:100%;
  transform-style:preserve-3d;
  animation:kurukuru 16s linear infinite;
  li{
    font-size:0;
    text-indent:-4649em;
    width:100px;
    height:100px;
    position:absolute;
    &:first-child{
      background-color:rgba(0,0,0,.5);
      transform:rotate(45deg);
    }
    &:nth-child(2){
      background-color:rgba(40,40,40,.5);
      transform:rotate(45deg) translateZ(-100px);
    }
    &:nth-child(3){
      bottom:25px;
      right:25px;
      background-color:rgba(80,80,80,.5);
      transform-origin:bottom;
      transform:rotate(45deg) rotateX(90deg) translateZ(-15px);
    }
    &:nth-child(4){
      bottom:-25px;
      right:-25px;
      background-color:rgba(120,120,120,.5);
      transform-origin:top;
      transform:rotate(45deg) rotateX(-90deg) translateZ(-15px);
    }
    &:nth-child(5){
      top:-25px;
      right:-25px;
      background-color:rgba(160,160,160,.5);
      transform-origin:left;
      transform:rotate(45deg) rotateY(90deg) translateZ(-15px);
    }
    &:last-child{
      top:25px;
      right:25px;
      background-color:rgba(200,200,200,.5);
      transform-origin:right;
      transform:rotate(45deg) rotateY(-90deg) translateZ(-15px);
    }
  }
}
.large{
  margin:0;
  width:200px;
  height:200px;
  position:absolute;
  transform-origin:50% 50% -100px;
  top:100px;
  left:calc(50% - 100px);
  animation:kurukuru 8s linear infinite;
  li{
    width:200px;
    height:200px;
    &:nth-child(2){
      transform:rotate(45deg) translateZ(-200px);
    }
    &:nth-child(3){
      bottom:50px;
      right:50px;
      transform:rotate(45deg) rotateX(90deg) translateZ(-30px);
    }
    &:nth-child(4){
      bottom:-50px;
      right:-50px;
      transform:rotate(45deg) rotateX(-90deg) translateZ(-30px);
    }
    &:nth-child(5){
      top:-50px;
      right:-50px;
      transform:rotate(45deg) rotateY(90deg) translateZ(-30px);
    }
    &:last-child{
      top:50px;
      right:50px;
      transform:rotate(45deg) rotateY(-90deg) translateZ(-30px);
    }
  }
}


@keyframes kurukuru{
  0% {transform:rotateX(0turn) rotateY(0turn) rotateZ(0turn);}
  100% {transform:rotateX(1turn) rotateY(2turn) rotateZ(1turn)}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.