.wrap
 -3.times do
  .plane
   -9.times do
    .cube
     -6.times do
      .face

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
    background: linear-gradient(to right, #ece9e6, #ffffff);
  *{
    transform-style:preserve-3d;
  }
  .wrap{
    width:400px;
    height:400px;
    position:relative;
    transform:rotateX(-45deg) rotateY(-45deg);
    animation:flip 3s ease-in-out infinite alternate;
    @keyframes flip{
      25%{
        transform:rotateX(-45deg) rotateY(-45deg);
      }
      50%{
        transform:rotateX(45deg) rotateY(-45deg);
      }
      75%{
        transform:rotateX(45deg) rotateY(45deg);
      }
      100%{
        transform:rotateX(45deg) rotateY(45deg);
      }
    }
    .plane{
      position:absolute;
      width:100%;
      height:100%;
      left:0;
      top:0;
      &:first-of-type{
        transform:translateZ(133.3436px);
      }
      &:last-of-type{
        transform:translateZ(-133.3436px);
      }
      @for $i from 1 through 3{
        &:nth-of-type(#{$i}){
          .cube{
            @for $j from 1 through 9{
              &:nth-of-type(#{$j}){
                animation-delay:#{$i * $j / 50}s;
              }
            }
          }
        }
      }
      .cube{
        position:relative;
        margin:29.1718px;
        width:75px;
        height:75px;
        box-shadow:inherit;
        display:inline-block;
        float:left;
        animation:flip2 3s cubic-bezier(0.175, 0.885, 0.32, 0.85) infinite alternate;
    @keyframes flip2{
      0%{
        transform:rotateX(0deg) rotateY(0deg);
      }
      25%{
        transform:rotateX(0deg) rotateY(0deg) scaleZ(0.5) scale(0.5);
      }
      50%{
        transform:rotateX(-45deg) rotateY(-180deg);
      }
      75%{
        transform:rotateX(0deg) rotateY(0deg) scaleZ(0.5) scale(0.5);
      }
      100%{
        transform:rotateX(0deg) rotateY(0deg);
      }
    }
        .face{
          position:absolute;
          width:100%;
          height:100%;
          left:0;
          top:0;
          @for $i from 1 through 6{
            &:nth-of-type(#{$i}){
              background:darken(#fff, $i * 2);
            }
          }
          &:nth-of-type(2){
            transform-origin:top;
            transform:rotateX(-90deg);
          }
          &:nth-of-type(3){
            transform-origin:bottom;
            transform:rotateX(90deg);
          }
          &:nth-of-type(4){
            transform-origin:right;
            transform:rotateY(-90deg);
          }
          &:nth-of-type(5){
            transform-origin:left;
            transform:rotateY(90deg);
          }
          &:nth-of-type(6){
            transform:translateZ(-75px);
          }
        }
      }
    }
  }
}