<div class="row">
  
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
  
</div>
<div class="row">
  
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
  
</div>
<div class="row">
  
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
  
</div>
<div class="row">
  
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
<div class="cube">
  <b class="t"><b></b></b>
  <b class="l"></b>
  <b class="r"></b>
</div>
  
</div>

<h1>'Flat' Grid</h1>
<button>Reset</button>

body {
  padding: 160px 0 0 160px;
}

/* Rows */
.row {
  position: relative;
  float: left;
  margin-left: -117px;
}
.row:nth-of-type(1){
  z-index: 4;
  top: 0;
}
.row:nth-of-type(2){
  z-index: 3;
  top: -25px;
}
.row:nth-of-type(3){
  z-index: 2;
  top: -50px;
}
.row:nth-of-type(4){
  z-index: 1;
  top: -75px;
}

/* Cube */
.cube {
  position: relative;
  z-index: 2;
  float: left;
  width: 40px;
  height: 40px;
  transition:
    margin-top 0.15s,
    opacity 0.1s;
}

/* Block Faces */
.cube b {
  display: block;
  width: 40px;
}
.t,.t b { height: 40px; }
.l,.r {
  height: 10px;
  transition:
    height 0.15s,
    border-width 0.15s;
}
.t,.l,.r { position: absolute; }

/* Left */
.l {
  transform: skewY(30deg);
  background: #a0b31a;
  border-bottom: 10px solid #754a2d;
}
.r {
  transform: skewY(-30deg);
  background: #d4e657;
  left: 40px;
  border-bottom: 10px solid #a46e4b;
}
.t b {
  transform: skewY(-30deg) scaleY(1.16);
  background: #c2d730;
}
.t {
  transform: rotate(60deg);
  top: -31px;
  left: 20px;
}

/* Transition */
.cube:nth-of-type(1) {
  top: 0;
  left: 3px;
}
.cube:nth-of-type(2) {
  top: 25px;
  left: 6px;
}
.cube:nth-of-type(3) {
  top: 50px;
  left: 9px;
}
.cube:nth-of-type(4) {
  top: 75px;
  left: 12px;
}

/* Hover */
.cube:hover {
  margin-top: 2px;
}
.cube:hover .l,
.cube:hover .r {
  height: 9px;
  border-bottom-width: 9px;
}
.cube.pressed {
  margin-top: 10px;
  opacity: 0.7;
}
.cube.pressed .l,
.cube.pressed .r {
  height: 5px;
  border-bottom-width: 5px;
}

/* Button */
button {
  position: absolute;
  top: 135px;
  left: 420px;
  border: none;
  background: #e74c3c;
  color: #FFF;
  font-size: 14px;
  padding: 10px 25px;
  border-radius: 5px;
  border-bottom: 3px solid #c0392b;
  cursor: pointer;
}
button:hover {
  background: #fc6657;
  border-bottom-color: #e74c3c;
}
button:active {
  top: 137px;
  border-bottom-width: 1px;
}

/* Heading */
h1 {
  position: absolute;
  top: 85px;
  left: 420px;
  font: bold 19px/30px Arial;
  color: #444;
}

/*
  CSS Isometric Grid
  ==================
  
  Uses 2D transforms to
  render an isometric grid
  where nth-of-type adjust
  positioning relative to
  index.
  
  Basic transitions handle
  the effects; it's simple
  border and height
  adjustments.
*/

var cubes = $(".cube");

cubes.on("click", function(){
  $(this).addClass("pressed");
});
$("button").on("click", function(){
  cubes.removeClass("pressed");
});