<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
  </ul>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div{
  margin:125px auto 0;
  width:300px;
  height:300px;
  position:relative;
  transform-origin:50% 50% -150px;
  transform-style:preserve-3d;
  animation:kurukuru 32s linear infinite;
  ul{
    list-style:none;
    position:relative;
    transform-style:preserve-3d;
    li{
      font-size:50px;
      font-weight:900;
      text-align:center;
      text-shadow:0 0 10px #000;
      line-height:300px;
      width:300px;
      height:300px;
      position:absolute;
      border:5px solid #00c;
      border-radius:1%;
      background-color:rgba(64,64,192,.1);
      &:nth-child(n+7){
        background-color:rgba(92,92,200,.5);
      }
      &:nth-child(n+11){
        background-color:rgba(0,0,255,.5);
      }
      &:nth-child(n+15){
        background-color:rgba(120,120,255,.5);
      }
      &:nth-child(n+19){
        font-size:75px;
        background-color:rgba(64,64,192,.5);
        border:10px solid #00c;
      }
      &:first-child{
      }
      &:nth-child(2){
        transform:translateZ(-300px);
      }
      &:nth-child(3){
        transform-origin:bottom;
        transform:rotateX(90deg);
      }
      &:nth-child(4){
        transform-origin:top;
        transform:rotateX(-90deg);
      }
      &:nth-child(5){
        transform-origin:left;
        transform:rotateY(90deg);
      }
      &:nth-child(6){
        transform-origin:right;
        transform:rotateY(-90deg);
      }
      &:nth-child(7){
        transform-origin:bottom;
        transform:perspective(150px) rotateX(45deg);
      }
      &:nth-child(8){
        bottom:0;
        transform-origin:bottom;
        transform:perspective(150px) rotateX(135deg);
      }
      &:nth-child(9){
        transform-origin:right;
        transform:rotateZ(270deg) rotateY(90deg) translate3d(300px,0,150px) translateY(-150px) perspective(150px) rotateY(-45deg);
      }
      &:nth-child(10){
        transform-origin:right;
        transform:rotateY(90deg) rotateX(270deg) translate3d(300px,150px,150px) perspective(150px) rotateY(-45deg);
      }
      &:nth-child(11){
        transform-origin:left;
        transform:perspective(150px) rotateY(45deg);
      }
      &:nth-child(12){
        transform-origin:right;
        transform:perspective(150px) rotateY(-45deg);
      }
      &:nth-child(13){
        transform-origin:right;
        transform:translateZ(-300px) rotateX(180deg) perspective(150px) rotateY(-45deg);
      }
      &:nth-child(14){
        transform-origin:right;
        transform:rotateY(-180deg) translate3d(300px,0,300px) perspective(150px) rotateY(-45deg);
      }
      &:nth-child(15){
        transform-origin:right;
        transform:rotateX(90deg) translate3d(0,-150px,150px) perspective(150px) rotateY(-45deg);
      }
      &:nth-child(16){
        transform-origin:right;
        transform:rotateX(270deg) translate3d(0,150px,150px) perspective(150px) rotateY(-45deg);
      }
      &:nth-child(17){
        transform-origin:right;
        transform:translate3d(-300px,150px,-150px) rotateX(270deg) perspective(150px) rotateY(-135deg);
      }
      &:nth-child(18){
        transform-origin:right;
        transform:rotateY(270deg) rotateZ(270deg) translate3d(150px,-150px,300px) perspective(150px) rotateY(-45deg);
      }
      &:nth-child(19){
        transform:translateZ(-87px) scale(.43,.43);
      }
      &:nth-child(20){
        transform-origin:right;
        transform:rotateY(90deg) translate3d(216px,0,-87px) scale(.43,.43);
      }
      &:nth-child(21){
        transform-origin:right;
        transform:rotateX(90deg) translate3d(-87px,-150px,-63px) scale(.43,.43);
      }
      &:nth-child(22){
        transform-origin:right;
        transform:rotateX(180deg) translate3d(-87px,0,216px) scale(.43,.43);
      }
      &:nth-child(23){
        transform-origin:right;
        transform:rotateX(90deg) translate3d(-87px,-150px,63px) scale(.43,.43);
      }
      &:nth-child(24){
        transform-origin:bottom;
        transform:rotateY(90deg) translate3d(150px,-87px,-63px) scale(.43,.43);
      }
    }
  }
}

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