3d-cube-loader.markdown

3d cube loader

A Pen by Lionel T on CodePen.

License.

index.haml

.base
  -(1..9).each do |i|
    .cube

style.scss

$red : #f66;
$blue: #05afd1;

$c: $blue; // Main color
$size: 12px;


body {
  background-color: #dedede;
  font-size: $size;
}
.base {
    height: 9em;
    left: 50%;
    margin: -7.5em;
    padding: 3em;
    position: absolute;
    top: 50%;
    width: 9em;
    transform: rotateX(45deg) rotateZ(45deg);
    transform-style: preserve-3d;
}
.cube,
.cube:after,
.cube:before {
    content: '';
    float: left;
    height: 3em;
    position: absolute;
    width: 3em;
}
/* Top */
.cube {
    background-color: $c;
    position: relative;
    transform: translateZ(3em);
    transform-style: preserve-3d;
    transition: .25s;
    box-shadow:13em 13em 1.5em rgba(0,0,0,0.1);
    &:after { // Left
      background-color: shade($c, 10);
      transform: rotateX(-90deg) translateY(3em);
      transform-origin: 100% 100%;
    }
    &:before { // Right
      background-color: shade($c, 20);
      transform: rotateY(90deg) translateX(3em);
      transform-origin: 100% 0;
   }
  animation: anim 1s infinite;
  @for $i from 1 to 10 {
    &:nth-child(#{$i}){
      animation-delay:#{$i * .05s}
    }
  }
}

@keyframes anim {
  50% { transform: translateZ(0.5em); }
}