<div>
  <ol>
    <li><span></span><strong>1</strong></li>
    <li><span></span><strong>2</strong></li>
    <li><span></span><strong>3</strong></li>
    <li><span></span><strong>4</strong></li>
    <li><span></span><strong>5</strong></li>
    <li><span></span><strong>6</strong></li>
    <li><span></span><strong>7</strong></li>
    <li><span></span><strong>8</strong></li>
    <li><span></span><strong>9</strong></li>
    <li><span></span><strong>10</strong></li>
    <li><span></span><strong>11</strong></li>
    <li><span></span><strong>12</strong></li>
  </ol>
</div>
*{
  margin:0;
  padding:0;
}

ol{
  list-style:none;
  margin:200px auto;
  width:200px;
  position:relative;
  transform-style:preserve-3d;
  animation:kurukuru 8s linear infinite;
  li{
    width:100px;
    height:100px;
    position:absolute;
    background:#333;
    opacity:.5;
    strong{
      font-size:50px;
      color:#333;
      text-align:center;
      line-height:1.25;
      text-shadow:1px 0 1px #fff,0 1px 1px #fff,0 -1px 1px #fff,-1px 0 1px #fff;
      width:100%;
      position:absolute;
      z-index:1;
    }
    &:before,
    &:after{
      content:"";
      width:100%;
      height:100%;
      bottom:0;
      left:0;
      position:absolute;
      background:#333;
    }
    &:before{
      transform-origin:bottom right;
      transform:rotate(18deg);
    }
    &:after{
      transform-origin:bottom left;
      transform:rotate(-18deg);
    }
    span{
      &:before,
      &:after{
        content:"";
        width:100px;
        height:100px;
        position:absolute;
        background:#333;
      }
      &:before{
        transform-origin:top left;
        transform:rotate(-36deg) translate3d(-28px,-14px,0px);
      }
      &:after{
        transform-origin:top right;
        transform:rotate(36deg) translate3d(28px,-14px,0px);
      }
    }
    &:nth-child(2){
      transform-origin:bottom;
      transform:rotateX(116.5deg);
    }
    &:nth-child(3){
      transform-origin:bottom;
      transform:rotateZ(72deg) translate3d(-66px,48px,0px) rotateX(116.5deg);
    }
    &:nth-child(4){
      transform-origin:bottom;
      transform:rotateZ(144deg) translate3d(-41px,125px,0px) rotateX(116.5deg);
    }
    &:nth-child(5){
      transform-origin:bottom;
      transform:rotateZ(216deg) translate3d(40px,125px,0px) rotateX(116.5deg);
    }
    &:nth-child(6){
      transform-origin:bottom;
      transform:rotateZ(288deg) translate3d(65px,48px,0px) rotateX(116.5deg);
    }
    &:nth-child(7){
      transform-origin:bottom;
      transform:rotateZ(36deg) translate3d(-40px,15px,-223px) rotateX(-116.5deg);
    }
    &:nth-child(8){
      transform-origin:bottom;
      transform:rotateZ(108deg) translate3d(-65px,92px,-223px) rotateX(-116.5deg);
    }
    &:nth-child(9){
      transform-origin:bottom;
      transform:rotateZ(180deg) translate3d(0px,138px,-223px) rotateX(-116.5deg);
    }
    &:nth-child(10){
      transform-origin:bottom;
      transform:rotateZ(252deg) translate3d(65px,92px,-223px) rotateX(-116.5deg);
    }
    &:nth-child(11){
      transform-origin:bottom;
      transform:rotateZ(324deg) translate3d(40px,15px,-223px) rotateX(-116.5deg);
    }
    &:nth-child(12){
      transform-origin:bottom;
      transform:rotateZ(36deg) translate3d(-40px,15px,-223px);
    }
  }
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.