CodePen Embed - Cube Float [pure css] ∫

<div class='measure'></div>
<ul class='buttonCont'>
  <li class='button inkAnchor whtSlate_B'>White Slate</li>
  <li class='button inkAnchor honeyComb_B'>Honey Comb</li>
  <li class='button inkAnchor phosGreen-II_B'>Phos. Green</li>
  <li class='button inkAnchor gemBlue_B'>Gem Blue</li>
</ul>
<div id='colorWrapper' class='gemBlue'>
  <div class='grid'>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
    <div class='cube'>
      <div class='lifter'>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
        <div class='cube__face'></div>
      </div>
    </div>
  </div>
</div>
<div class="shadow flatShadow dropShadow"> </div>


$n-dim: 4;
// $n: pow($n-dim, 2); //Orig var.
$n: 16;  //FIX: Stupid reason not accepting a 'pow()' for "$i from to __"
$n-faces: 3;
$c: #101418 #333f80 #276EFF; 
$cL: #1E2448;
$BG: rgb(14, 12, 16);

$rot: rotateX(90deg) rotateY(90deg) ();
$edge: 2.75em;
$dist: $edge + .75em;
$t: 3.15s;

html {font-size: 12px /* 16px=default*/; overflow: hidden;  }

// .measure {position:absolute; width: 50vw; height: 6em; background-color: white;}

.buttonCont {
  display:flex; position:absolute;
  flex-direction: column;
  align-items: center;
  justify-content: space-around; 
  left: 1.25em; top: 1.25em;
  padding: 1em 0;
  width: 8.5em; height: 15em;
  border-radius: 0.15em;
  background: rgba(195,198,205,0.06);
  box-shadow: inset 2em 2em 12em -4em rgba(195,198,205,0.2);
  .button {
    position:relative; display:block;
    padding: 0 1em;
    height: 2.5em;
    font-family: 'Open Sans';
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 8px;
    line-height: 2.5em;
    border-radius: 0.15em;
    overflow:hidden;
    cursor: pointer;
    transition: box-shadow 0.6s ease;
    &.gemBlue_B {color:#276EFF ; background-color: #1E2448;}
     &.phosGreen-II_B {color:#15f4c2 ; background-color: #0A1819;}
     &.honeyComb_B {color:#FCB367 ; background-color: #FFF8E4;}
     &.whtSlate_B {color:#a0aAa9 ; background-color: #E4EDEC;}
  }
}




 #colorWrapper {
   
   width: 100vw; height: 100vh;
   background-color: $BG ;
   transition: background-color 0.35s ease-out;
  .grid {
    width: (($edge * 4) + (0.5em * 3)) * 0.7 + 0em; 
    height: 6.25em; 
  //  background-color: white;
    &, * {
      position: absolute;
      top: 50%; left: 50%;
      transform-style: preserve-3d;
    }
    transform: rotateX(-35deg) rotateY(-45deg);
   /* animation: revolveGrid 6s ease infinite alternate;
    @keyframes revolveGrid {
      from {transform: rotateX(-65deg) rotateY(-45deg);}
      to {transform: rotateX(-15deg) rotateY(-45deg);}
    } */
  }

  .cube {
    @for $i from 0 to $n {
      $j: $i%$n-dim;
      $k: floor($i/$n-dim);
      $tx: ($j - .5*($n-dim - 1))*$dist ;
      $tz: ($k - .5*($n-dim - 1))*$dist ;

      &:nth-child(#{$i + 1}) {
        transform: translate3d($tx , 0, $tz );

        .lifter, .cube__face:nth-child(1) {
          animation-delay: 
            ($j + ($n-dim - 1 - $k))*0.0466*$t;
        }
      }
    }

    &__face {
      margin: (-10 * $edge) + 20;
      width: $edge; height: $edge;
      transition: background 0.35s ease-out;
      @for $i from 0 to $n-faces {
        &:nth-child(#{$i + 1}) {
          transform: nth($rot, $i + 1) 
            translateZ(.5*$edge);
          background: nth($c, $i + 1);
        }
        &:nth-child(1){
        //  box-shadow: 350px 220px 90px rgba(0,0,0,0.1), 320px 250px 50px rgba(0,0,0,0.03);
          background: nth($c, 1);
          animation: aniCL ($t / 4) cubic-bezier(.4,0.2,.4,0.6) alternate infinite ;
        }
      }
    }
  }

  .lifter {
    transform-origin: 0 .5 * $edge;
    transform: scaleY(0);
    animation: ani ($t / 4) cubic-bezier(.5,.1,.5,.9) alternate infinite ; // cubic-bezier(.625,.075,.4,.925)
  }

  @keyframes ani {
    0% { transform: scaleY(0); }
    100% { transform: scaleY(0.533); }
  }
//  @keyframes aniCL {
//    0% { background: nth($cL, 1); }
//    100% { background: nth($c, 1); }
//  }

  /*@keyframes aniCL {
    0%, 25%, 50%, 75%, 100% { background: nth($cL, 1); }
    12%, 36%, 64%, 89%,  { background: nth($c, 1); }
  }*/
}

/*
.shadow {
  position: relative;
  top: 50vh;
  margin: 0 auto; margin-top: -200px;
  width: 200px; height: 200px;
  background-color: transparent;
  transform: rotateX(60deg) rotate(45deg);
  z-index: -1;
}
.flatShadow {
  margin-top: 20px;
  background-color: rgba(60,0,0,0.008);
}
// .dropShadow { box-shadow: 420px 400px 160px rgba(90,0,0,0.1);}  
*/



#colorWrapper.honeyComb {
  $c: #FFF2D0 #FFD792  #FCB367 ; 
  $cL: #FFF8E4;
  $BG: rgb(250, 252, 251);
  
 background-color: $BG; 
    .cube {
    &__face {
      @for $i from 0 to $n-faces {
        &:nth-child(#{$i + 1}) {
          background: nth($c, $i + 1);
        }
        &:nth-child(1){
          background: nth($c, 1);
          animation: aniCL-honeyComb ($t / 4) cubic-bezier(.4,0.2,.4,0.6) alternate infinite ;
        }
      }
    }
  }
    @keyframes aniCL-honeyComb {
    0% { background: nth($cL, 1); }
    100% { background: nth($c, 1); }
  }
}

#colorWrapper.whtSlate {
$c: #D0DAD9 #B9C6C7 #E4EDEC ; 
$cL: #D0DAD9;
$BG: rgb(250, 252, 251);
  
 background-color: $BG; 
    .cube {
    &__face {
      @for $i from 0 to $n-faces {
        &:nth-child(#{$i + 1}) {
          background: nth($c, $i + 1);
        }
        &:nth-child(1){
          background: nth($c, 1);
          animation: aniCL-whtSlate ($t / 4) cubic-bezier(.4,0.2,.4,0.6) alternate infinite ;
        }
      }
    }
  }
    @keyframes aniCLwht-Slate {
    0% { background: nth($cL, 1); }
    100% { background: nth($c, 1); }
  }
}

#colorWrapper.phosGreen-II {
$c: #0A1819 #102928 #15f4c2; 
$cL: #0d2c2f;
$BG: rgb(16, 18, 22);
  
 background-color: $BG; 
    .cube {
    &__face {
      @for $i from 0 to $n-faces {
        &:nth-child(#{$i + 1}) {
          background: nth($c, $i + 1);
        }
        &:nth-child(1){
          background: nth($c, 1);
          animation: aniCL-phosGreen-II ($t / 4) cubic-bezier(.4,0.2,.4,0.6) alternate infinite ;
        }
      }
    }
  }
    @keyframes aniCL-phosGreen-II {
    0% { background: nth($cL, 1); }
    100% { background: nth($c, 1); }
  }
}

#colorWrapper.gemBlue {
$c: #101C28 #2D59C8 #10AAFF; 
$cL: #1B2E6E;
$BG: rgb(12, 12, 20); //orig rgb(12, 12, 20); //LightBG rgb(250, 251, 252
  
 background-color: $BG; 
    .cube {
    &__face {
      @for $i from 0 to $n-faces {
        &:nth-child(#{$i + 1}) {
          background: nth($c, $i + 1);
        }
        &:nth-child(1){
          background: nth($c, 1);
          animation: aniCL-gemBlue ($t / 4) cubic-bezier(.4,0.2,.4,0.6) alternate infinite ;
        }
      }
    }
  }
    @keyframes aniCL-gemBlue {
    0% { background: nth($cL, 1); }
    100% { background: nth($c, 1); }
  }
}

/*/\\/   RIPPLE CLICK FX ---Start----   /\/\*/
.inkAnchor {
  // display: inline-block !important; 
  cursor: pointer; /*since the links are dummy without href values*/
  /*prevent text selection*/
  user-select: none;
  /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
  position: relative;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.button:active {
  transition: box-shadow 0.15s ease-out;
  box-shadow: 0 0.5em 0.33em -0.33em rgba(0,0,0, 0.12), 0 0.33em 1em -0.25em rgba(0,0,0, 0.2);
}

.whtSlate_B .ink {background-color: #B9C6C7;}
.honeyComb_B .ink {background-color: #FFD792;}
.phosGreen-II_B .ink {background-color: #15f4c2;}
.gemBlue_B .ink {background-color: #276EFF;}
.ink {
 // font-size: 100%; //defines Em-size
  display: block; 
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background-color: blue;
  pointer-events: none !important;
//  mix-blend-mode: color;
//  color: black;
 // box-shadow: inset 0 0 0 0em;
 //   background-color: black;
//  mix-blend-mode: difference;
//  z-index: -2;
}
/*animation effect*/
.ink.animateInk {animation: ripple 0.9s cubic-bezier(0.2,0.2, 0,1) forwards 1;}
@keyframes ripple {
    0% {opacity: 0.6; transform: scale(0); /*box-shadow: inset 0 0 0 12em ;*/ }

  100% {opacity: 0.0; transform: scale(1);/* box-shadow: inset 0 0 0 0em ;*/}
}

View Compiled

//Open
$('#colorWrapper').removeClass();
$('#colorWrapper').addClass('gemBlue');

//Generic
$('.button').on("click", function(){
     $('#colorWrapper').removeClass();
});  
//Specific
$('.whtSlate_B').on("click", function(){
     $('#colorWrapper').addClass('whtSlate');
});
$('.honeyComb_B').on("click", function(){
     $('#colorWrapper').addClass('honeyComb');
});
$('.phosGreen-II_B').on("click", function(){
     $('#colorWrapper').addClass('phosGreen-II');
});
$('.gemBlue_B').on("click", function(){
     $('#colorWrapper').addClass('gemBlue');
});


// COLOR Options [#top, #right, #left] top=bg
/* 
White Paper
$c: #fff #a9a9a9 #dcdcdc;

Dark Grey
$c: #252525 #1a1a1a #222;

Shadow
$c: #101010 #191919 #999; // background-color: #0d0d0d; }

Piano Keys
$c: #101010 #e3e3e3 #999; // background-color: #0d0d0d; }

Phosphorescent Green Machine
$c: #0b1515 #102928 #15f4c2;
$c: #0d1919 #102928 #15f4c2; (lighter top face) // background-color: #0b1515;
//NU vvv
$c: #0A1819 #102928 #15f4c2; // background-color: #0b1515;
$cL: #0E2D2D;
$BG: #0b1515;

// NU Blue Gem
$c: #101418 #333f80 #276EFF; 
$cL: #1E2448;
$BG: rgb(14, 12, 16);

// Slate on White
$c: #D0DAD9 #B9C6C7 #E4EDEC ; 
$cL: #D0DAD9;
$BG: rgb(250, 252, 251);

// Honey-Comb
$c: #FFF2D0 #FFD792  #FCB367 ; 
$cL: #FFF8E4;
$BG: rgb(250, 252, 251);

*/


 //// Ink-Ripple onCLick <a> 
      var parent, ink, d, x, y,
      AnchorClick = $(".inkAnchor");
  
AnchorClick.on('mousedown', function(e){
  
      parent = $(this);  // OR $(this).parent(); if I contain the a, but a is already display block, so place .ink inside of a's box

    //create .ink element if it doesn't exist
    if(parent.find(".ink").length == 0)
      parent.prepend("<span class='ink'></span>");

    ink = parent.find(".ink");
    //incase of quick double clicks stop the previous animation
    ink.removeClass("animateInk");

    //set size of .ink
    if(!ink.height() && !ink.width())
    {
      //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
     // d = Math.max(parent.outerWidth(), parent.outerHeight());
     // ink.css({height: d, width: d});
      ink.css({"height": '12em', "width": '12em'});
    }

    //get click coordinates
    //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
    x = e.pageX - parent.offset().left - ink.width()/2;
    y = e.pageY - parent.offset().top - ink.height()/2;

    //set the position and add class .animate
    ink.css({top: y+'px', left: x+'px'}).addClass("animateInk");
});

This Pen is owned by Drew Endly on CodePen.

See more by @drewendly on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js