div
  ul
    - for (var cc = 0; cc < 6; cc++)
      li
  ul.large
    - for (var hh = 0; hh < 6; hh++)
      li
p グルグル回るよ…いつまでも
View Compiled
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div{
  margin:0 auto;
  width:250px;
  height:250px;
  border:5px solid #fff;
}
p{margin:0 auto 2em;text-align:center;}
ul{
  list-style:none;
  margin:90px auto 0;
  width:60px;
  height:60px;
  position:relative;
  transform-origin:50% 50% -30px;
  /*perspective:-5;*/
  transform-style:preserve-3d;
  animation:kurukuru 16s linear infinite;
  li{
    font-size:0;
    text-indent:-4649em;
    width:60px;
    height:60px;
    position:absolute;
    &:first-child{
      background:rgba(0,0,0,.5);
    }
    &:nth-child(2){
      background:rgba(40,40,40,.5);
      transform:translateZ(-60px);
    }
    &:nth-child(3){
      background:rgba(80,80,80,.5);
      transform-origin:bottom;
      transform:rotateX(90deg);
    }
    &:nth-child(4){
      background:rgba(120,120,120,.5);
      transform-origin:top;
      transform:rotateX(-90deg);
    }
    &:nth-child(5){
      background:rgba(160,160,160,.5);
      transform-origin:left;
      transform:rotateY(90deg);
    }
    &:last-child{
      background:rgba(200,200,200,.5);
      transform-origin:right;
      transform:rotateY(-90deg);
    }
  }
}
.large{
  margin:0;
  width:120px;
  height:120px;
  position:absolute;
  transform-origin:50% 50% -60px;
  top:60px;
  left:calc(50% - 60px);
  animation:kurukuru 8s linear infinite;
  li{
    width:120px;
    height:120px;
    &:nth-child(2){
      transform:translateZ(-120px);
    }
    &:nth-child(3){
      transform:rotateX(90deg);
    }
    &:nth-child(4){
      transform:rotateX(-90deg);
    }
    &:nth-child(5){
      transform: rotateY(90deg);
    }
    &:last-child{
      transform:rotateY(-90deg);
    }
  }
}


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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.