<div class="cube cube1">
  <span class="face top">
    <p>transform-origin: 0 0;<br><br>transform:<i>rotate(210deg)</i><i>skewX(-30deg)</i><i>scaleY(0.864);</i></p>
  </span>
  <span class="face left">
    <p>transform-origin: 0 0;<br><br>transform:<i>rotate(90deg)</i><i>skewX(-30deg)</i><i>scaleY(0.864);</p>
  </span>
  <span class="face right">
    <p>transform-origin: 0 0;<br><br>transform:<i>rotate(-30deg)</i><i>skewX(-30deg)</i><i>scaleY(0.864);</i></p>
  </span>
</div>

<div class="cube cube2">
  <span class="face top">
    <p>transform:<br><i>rotate(-45deg)</i><i>skew(15deg, 15deg)</i></p>
  </span>
  <span class="face left">
    <p>transform:<br><i>rotate(15deg)</i><i>skew(15deg, 15deg)</i><i>translate(-50%, 100%)</i></p>
  </span>
  <span class="face right">
    <p>transform:<br><i>rotate(75deg)</i><i>skew(15deg, 15deg)</i><i>translate(100%, -50%)</i></p>
  </span>
</div>

@import "bourbon";

// cube basic styling
.cube {
  position: relative;

  .face {
    position: absolute;
    height: 170px;
    width: 170px;

    &.top { background: #f5f5f5; }
    &.left { background: #cccccc; }
    &.right { background: #e0e0e0; }
  }
}

// cube 1
.cube1 {
  .face {
    @include transform-origin(0 0);

    &.top {
      @include transform(rotate(210deg) skewX(-30deg) scaleY(0.864));
    }

    &.left {
      @include transform(rotate(90deg) skewX(-30deg) scaleY(0.864));
    }

    &.right {
      @include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864));
    }
  }
}

// cube 2 (alternative)
.cube2 {
  .top {
    @include transform(rotate(-45deg) skew(15deg, 15deg));
  }
  .left {
    @include transform(rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%));
  }
  .right {
    @include transform(rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%));
  }
}


// demo styling
* { @include box-sizing(border-box); }
body{ text-align: center; }

.cube {
  display: inline-block;
  margin-top: 20px;
  width: 340px;
  height: 350px;
  text-align: left;
  
  p {
    height: 100%;
    margin: 0;
    padding: 50px 0 0 10px;
    font-size: 11px;
    font-family: monospace, sans-serif;
    line-height: 1.4;
  }
  
  i {
    display: block;
    padding-left: 1em;
    font-style: normal;
  }
}

.cube1 {
  .face { left: 170px; top: 180px; }
  
  p { padding-top: 40px; }
  
  .top p {
    @include transform-origin(50% 50%);
    @include transform(rotate(90deg));
  }
  
  .left p {
    @include transform-origin(50% 50%);
    @include transform(rotate(-90deg));
  }
}

.cube2 .face { left: 85px; }