<div class="wrap">
    <div class="cube">
      <div class="one">
      </div>
      <div class="two">
      </div>
      <div class="three">
      </div>
      <div class="four">
      </div>
      <div class="five">
      </div>
      <div class="six">
      </div>
    </div>
</div>

$sideSize: 280px;
$cubeColor: white;


$bgColor: invert($cubeColor);
$translate: $sideSize/2.002;


* {
  box-sizing: border-box;
}

body {
  padding: $sideSize/3;
  background: $bgColor;
  overflow: hidden;
}

.wrap {
  width: $sideSize;
  height: $sideSize;
  position: relative;
  animation: 2.5s drop linear infinite;
}

.cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(-($translate)) rotateZ(-30deg) rotateY(35.3deg) rotateX(-45deg);
  
  > div {
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    border-width: $sideSize*.00714; 
    border-style: solid;
    border-color: $cubeColor;
    
    &:after {
      width: 120%;
      height: 130%;
      background: $bgColor;
      position: absolute;
      left: -$sideSize*.03;
      top: $sideSize;
      animation: 2.5s linear cover infinite ;
    }
  }
  
  .one  { 
    transform: rotateY(0deg) translateZ($translate);
    
    &:after {
      content: '';
    }
  }
  .two   { 
    transform: rotateX(0deg) translateZ(-$translate); 
    
    &:after {
      content: '';
    }
  }
  .three  { 
    transform: rotateY(90deg) translateZ($translate); 
    
    &:after {
      content: '';
    }
  }
  .four   { 
    transform: rotateY(-90deg) translateZ($translate);
    
    &:after {
      content: '';
    }
  }
  .five    { 
    transform: rotateX(90deg) translateZ($translate);
    border-color: transparent;
  }
  .six { 
    transform: rotateX(-90deg) translateZ($translate);
    border-color: transparent;
  }
  
}

@keyframes cover {
  0%, 72.45% {
    top: ($sideSize - 2);
  }
  100% {
    top: -$sideSize*.0178;
  }
}

@keyframes drop {
  0% {
    margin-top: -$sideSize*2;
  }
  100% {
    margin-top: $sideSize;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.