<div class="logo">
  <div class="cube">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="cube">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<div class="logo wireframe">
  <div class="cube">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="cube">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
@import "bourbon";

// logo container
.logo {
  $size: 100px;
  $color: #ccc;

  position: relative;
  height: $size * 2;
  width: $size * 1.8;
  
  // cube container
  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    
    // inner cube
    &:nth-child(2) {
      @include transform(rotate(180deg) scale(.5));
    }
    
    // cube faces
    span {
      @include transform-origin(0 0);
      position: absolute;
      height: $size;
      width: $size;
      
      // top
      &:nth-child(1) {
        @include transform(rotate(210deg) skewX(-30deg) scaleY(0.864));
        background: lighten($color, 16%);
      }
      // left
      &:nth-child(2) {
        @include transform(rotate(90deg) skewX(-30deg) scaleY(0.864));
        background: $color;
      }
      // right
      &:nth-child(3) {
        @include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864));
        background: lighten($color, 8%);
      }
    }
  }
  
  // wireframe
  &.wireframe {
    $border-color: #000;
    $border-width: $size * .05;
    
    .cube {
      span {
        background: #fff;
        box-shadow: inset (-$border-width/4) (-$border-width/4) 0 $border-width $border-color;
      }
      
      &:nth-child(2) {
        span {
          box-shadow: inset (-$border-width/2) (-$border-width/2) 0 $border-width*2 $border-color;
        }
      }
    }
  }
}

// demo styling
body {
  text-align: center;

  .logo {
    display: inline-block;
    margin: 20px 20px 10px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.