- var totalCube = 64
.container
  .perspective
   - for (var i = 1; i < (totalCube+1);i++)
     .translate-cube-shadow
       .cube-shadow(id='cube-shadow-'+i)
     .cube(id='cube-'+i)
       .top
       .left
       .right

P
  a(href="https://codepen.io/verlangieri/") Codepen
  span Or
  a(href="https://twitter.com/verlangieri_d") twitter
View Compiled
$containerSize: 200px;
$cubeMargin: 10px;
$totalCube: 64;
$col: 8;

$animationHeightCube: 15px;
$animationDuration: 2s;
$delayAnimation: 0.2;

$cubeSize: ($containerSize / ($totalCube / $col));
$facesPosition: ($cubeSize / 2)-0.2;

* {
  box-sizing: border-box;
}

html,
body {
  background: #52ACE8;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.container {
  width: $containerSize;
  height: $containerSize;
  position: relative;
  perspective: 1000px;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform: translateY(-50%) translateX(-50%);
}

.perspective {
  transform: rotateX(60deg) rotateZ(25deg);
  transform-style: preserve-3d;
}

.cube, .cube-shadow {
  width: $cubeSize;
  height: $cubeSize;
  transform-style: preserve-3d;
  position: absolute;
}
.cube {animation: rotation $animationDuration infinite ease-in-out;}

.translate-cube-shadow {transform: translateZ(-40px);}

.cube-shadow {
  background: #4EA5DF;
  transform: translateZ(-60px);
  animation: scale $animationDuration infinite ease-in-out;
}

.cube div {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: #262626;
}

.cube .right {
  background: #EEEEEE;
  transform: rotateY(90deg) translateZ($facesPosition);
}

.cube .top {
  background: #FAFAFA;
  transform: rotateX(0deg) translateZ($facesPosition);
}

.cube .left {
  background: #E0E0E0;
  transform: rotateX(-90deg) translateZ($facesPosition);
}

@keyframes rotation {
  0% {transform: translateZ(0px);}
  50% {transform: translateZ($animationHeightCube);}
  100% {transform: translateZ(0px);}
}

@keyframes scale {
  0% {transform: scale(1)}
  50% {transform: scale(0.75)}
  100% {transform: scale(1)}
}

$columns: ($totalCube / $col) - 1;
$cubeI: 0;
$delayI: 0;
@for $y from 0 through $columns {
  
  $delayI: $y;
  
  @for $x from 0 through $columns {
    $cubeI: $cubeI+1;
    $delayI: $delayI+1;
    #cube-#{$cubeI}, #cube-shadow-#{$cubeI} {
      left: $x * ($cubeSize + $cubeMargin);
      top: $y * ($cubeSize + $cubeMargin);
      animation-delay: ($delayAnimation * $delayI)+s;
    }
  }
}

/*---------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script:700);
p {
  font-family: 'dancing script', sans-serif;position: fixed;left: 0;right: 0;bottom: 20px;margin: 0 auto;width: 280px;
  text-align: center;font-size: 12px;}

a {font-family: 'open sans', sans-serif;color: #418ABB;text-transform: uppercase;text-decoration: none;}

span {font-size: 20px;margin: 0 10px;color:#FFF}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.