Isometric cubes with HTML, CSS and SVG (animated)

index.html

<section>
  <h5>HTML</h5>
  <div class="logo animate">
    <div class="cube">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="cube">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</section>

<section>
  <h5>SVG</h5>
  <svg xmlns="http://www.w3.org/2000/svg" width="180" height="206.097" viewBox="0 0 180 206.097">
    <path fill="#CCCCCC" d="M89.997,154.906l-44.905-25.927l-0.004,0.002V77.122L2.126,52.319l0.007,101.459l87.873,50.734V154.9
      L89.997,154.906z M89.997,51.192v51.855l0.01,0.006l44.905,25.924l-0.003-51.849v-0.006L89.997,51.192z"/>
    <path fill="#E0E0E0" d="M134.909,77.127l0.003,51.849h-0.003L90.006,154.9v49.612l87.868-50.734V52.319L134.909,77.127z
       M89.997,103.047V51.192L45.09,77.12l-0.002,0.001v51.855L89.997,103.047z"/>
    <path fill="#F5F5F5" d="M134.909,77.122v0.006l42.965-24.808l-0.008-0.004l-87.86-50.73L2.133,52.319L45.09,77.12l44.907-25.929
      L134.909,77.122z M45.088,128.976l0.004,0.002l44.905,25.927l0.009-0.006l44.902-25.924l-44.901-25.924l-0.01-0.006L45.088,128.976z"/>
  </svg>
</section>

Isometric-cubes-with-HTML,-CSS-and-SVG-(animated).markdown

Isometric cubes with HTML, CSS and SVG (animated)

Created for this blog post: Isometric loading indicator with CSS http://blog.learningspaces.io/animated-loading-indicator-with-isometric-cubes/

LearningSpaces: http://learningspaces.io

A Pen by Matthijs Kuiper on CodePen.

License.

style.scss

@import "bourbon";
$cube-color: #ccc;
$cube-size: 100px;
$animation-duration: 1.2s;

// keyframes
@include keyframes(color-shift) {
  0%, 100% {
    background: $cube-color; // for html
    fill: $cube-color;       // for svg
  }
  33% {
    background: lighten($cube-color, 8%);
    fill: lighten($cube-color, 8%);
  }
  66% {
    background: lighten($cube-color, 16%);
    fill: lighten($cube-color, 16%);
  }
}

// apply animation
.logo.animate span,
svg path {
  @include animation(color-shift $animation-duration infinite);
  &:nth-child(2) { @include animation-delay(-$animation-duration / 3 * 2); }
  &:nth-child(3) { @include animation-delay(-$animation-duration / 3); }
}

// logo container
.logo {
  position: relative;
  height: $cube-size * 2;
  width: $cube-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: $cube-size;
      width: $cube-size;
      
      // top
      &:nth-child(1) {
        @include transform(rotate(210deg) skewX(-30deg) scaleY(0.864));
        background: lighten($cube-color, 16%);
      }
      // left
      &:nth-child(2) {
        @include transform(rotate(90deg) skewX(-30deg) scaleY(0.864));
        background: $cube-color;
      }
      // right
      &:nth-child(3) {
        @include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864));
        background: lighten($cube-color, 8%);
      }
    }
  }
}

// demo styling
body {
  text-align: center;
  font-family: sans-serif;
  color: #aaa;
  
  section {
    display: inline-block;
    margin: 10px 20px;
    vertical-align: top;
  }
}