Isometric projection using skew

index.html

<aside>
  <header>
    <p>
      βedrock <br>Eleven <br>
      Compiled <br>& Mixed <br>
      John <br>Digweed
    </p>
    <p>
      Out now <br>
      3xCD/DD <br>
      6x12" Vinyl
    </p>
  </header>
</aside>
<i class="inliner"></i>
<div class="inlined cols">
  <div class="col">
    <div class="cube1">
      <div class="face top"></div>
      <div class="face left"></div>
      <div class="face right"></div>
    </div>
    <div class="cube2">
      <div class="face left"></div>
      <div class="face right"></div>
    </div>
    <div class="cube3">
      <div class="face left"></div>
      <div class="face right"></div>
    </div>
  </div>
  <div class="col">
    <div class="cube1">
      <div class="face left"></div>
    </div>
    <div class="cube2">
      <div class="face left"></div>
    </div>
    <div class="cube3">
      <div class="face left"></div>
    </div>
  </div>
  <div class="cube4">
    <div class="face top"></div>
  </div>
</div>

Isometric projection using skew.markdown

Isometric projection using skew

Employs the inline sibling trick to achieve vertical centering. Updated to make use of trig to auto-calculate values.

Forked from Oliver Turner's Pen Isometric projection using skew.

A Pen by Alex Gray on CodePen.

License.

style.css

@import "compass/css3";

* {
  @include box-sizing(border-box);
}

html, body {
  height: 100%;
  background: #022238;
}

body{
  text-align: center;
  width: 800px;
  margin: auto;
}

aside {
  position: absolute;
  text-align: left;
  color: white;
  font-family: Helvetica, Arial, sans;
  
  p {
    margin: 10px;
    line-height: 14px;
  }
}

.inliner {
  height: 100%;
}

.inliner,
.inliner + .inlined {
  display        : inline-block;
  vertical-align : middle;
}

$tw    : 100px;
$th    : $tw;
$skew  : 30deg;
$skew_v: $skew * 2;
$cos   : cos($skew);
$hyp   : sqrt(pow($tw, 2) + pow($th, 2));

@mixin cubify($tint){
    .top { background:        $tint;       }
   .left { background: darken($tint, 15%); }
  .right { background: darken($tint, 30%); }
}

%cube {
  position: relative;
  width   : $tw * 1.68;
  height  : $th;
  
  .face {
    @include transform-origin(0, 0);    
    position: absolute;
    width   : $tw;
    height  : $th;
  }
  
  .top {
    @include transform(
      rotate($skew * -1) 
      skew($skew)
      scaleY($cos)
    );
  }
  
  .left {
    @include transform(
      rotate($skew) 
      skew($skew)
    );
  }  
  
  .right {
    @include transform(
      rotate($skew * -1) 
      skew($skew * -1)
    );
    left: floor($cos * $tw);
    top : floor(cos($skew_v) * $th);
  }
}

.cols {
  display: inline-block;
}

.col {
  display: inline-block;
}

.cube1,
.cube2,
.cube3,
.cube4 {
  @extend %cube;
}

.cube1 { @include cubify(#d9d9d9); }
.cube2 { @include cubify(#62ccea); }
.cube3 { @include cubify(#fdeb8d); }
.cube4 {
  @include cubify(#f7924a);
  
  left: floor($cos * $tw);
  top : $cos * ($hyp / 2);
}