div
  - for (var c = 0; c < 4; c++)
    ul
      - for (var cc = 0; cc < 20; cc++)
        li C
  - for (var h = 0; h < 8; h++)
    ol
      - for (var hh = 0; hh < 20; hh++)
        li H




View Compiled
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div{
  margin:100px auto 0;
  width:200px;
  height:200px;
  position:relative;
  transform-origin:50% 50% -25px;
  perspective:100%;
  transform-style:preserve-3d;
  animation:kurukuru 16s linear infinite;
}
ul{
  list-style:none;
  position:absolute;
  transform-style:preserve-3d;
  &:first-child{
    top:0;
    left:0;
  }
  &:nth-child(2){
    top:0;
    left:100px;
  }
  &:nth-child(3){
    top:100px;
    left:0;
  }
  &:nth-child(4){
    top:100px;
    left:100px;
  }
  li{
    font-size:0;
    width:100px;
    height:100px;
    border-radius:50%;
    border:2px solid #333;
    position:absolute;
    &:first-child{
      padding:15px 0 0 30px;
      font-size:50px;
    }
  }
}
ol{
  list-style:none;
  position:absolute;
  transform-style:preserve-3d;
  &:nth-child(5){
    top:175px;
    left:175px;
    transform:translateZ(50px);
  }
  &:nth-child(6){
    top:175px;
    left:175px;
    transform:translateZ(-50px);
  }
  &:nth-child(7){
    top:-25px;
    left:175px;
    transform:translateZ(50px);
  }
  &:nth-child(8){
    top:-25px;
    left:175px;
    transform:translateZ(-50px);
  }
  &:nth-child(9){
    top:175px;
    left:-25px;
    transform:translateZ(50px);
  }
  &:nth-child(10){
    top:175px;
    left:-25px;
    transform:translateZ(-50px);
  }
  &:nth-child(11){
    top:-25px;
    left:-25px;
    transform:translateZ(50px);
  }
  &:nth-child(12){
    top:-25px;
    left:-25px;
    transform:translateZ(-50px);
  }
  li{
    font-size:0;
    width:75px;
    height:75px;
    border-radius:50%;
    border:2px solid #333;
    position:absolute;
    &:first-child{
      padding:20px 0 0 25px;
      font-size:25px;
      font-weight:700;
    }
  }
}
$deg: 20;
@for $i from 0 to $deg{
  li:nth-child(#{$i + 1}) {
    transform: rotateX($i * 9 + deg);
  }
}
@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.