Moving cube

index.haml

.base
.cube
  .half

Moving-cube.markdown

Moving cube

A Pen by Ana Tudor on CodePen.

License.

style.scss

@import "compass/css3";
$l: 4em;
$bc: silver;
$cc: teal;

html, body {
  overflow: hidden;
  width: 100%; height: 100%;
  perspective-origin: 50% 25%;
  perspective: 26em;
  background: #222;
  &:before, &:after {
    z-index: 2;
    right: 50%; bottom: 50%;
    margin: (-$l);
    width:2*$l; height: $l*sqrt(2);
    transform: rotateY(40deg);
    content: '';
  }
}
body {
  margin: 0;
}
div, *:before, *:after {
  position: absolute;
  backface-visibility: hidden;
}
div { top: 50%; left: 50%; transform-style: preserve-3d; }
div:before, div:after { right: 0; bottom: 0; content: ''; }
.base {
  margin: 0 (-$l);
  width: 2*$l; height: 2*$l;
  transform: rotateX(90deg) rotate(50deg);
  background: linear-gradient(lighten($bc, 5%) 50%, $bc 50%), 
    linear-gradient($bc 50%, lighten($bc, 5%) 50%) 100% 0;
  background-repeat: no-repeat;
  background-size: 50% 100%;
  &:before {
    width: 1em; height: inherit;
    transform-origin: 100% 50%;
    transform: scaleX(-1) rotateY(-90deg);
    background: 
    linear-gradient(lighten($bc, 5%) 50%, lighten($bc, 10%) 50%);
  }
  &:after {
    width: inherit; height: 1em;
    transform-origin: 50% 100%;
    transform: scaleY(-1) rotateX(90deg);
    background: 
    linear-gradient(90deg, darken($bc, 5%) 50%, $bc 50%);
  }
}
.cube, .half, .cube:before, .cube:after, .half:before, .half:after {
  width: $l; height: $l;
  animation: inherit;
}
.cube {
  z-index: 0;
  transform-origin: 0 100%;
  transform: rotateY(40deg);
  animation: ani 8s linear infinite;
  animation-name: ani, light;
  background: lighten($cc, 10%);
  &:before {
    transform-origin: 50% 100%;
    transform: rotateY(180deg) rotateX(-90deg);
    background: darken($cc, 10%);
    animation-name: light-btm;
  }
  &:after {
    transform-origin: 100% 50%;
    transform: rotateY(90deg) scaleX(-1);
    background: $cc;
    animation-name: light-r;
  }
}
.half {
  margin: -$l/2;
  transform: rotateY(180deg) translateZ($l);
  background: darken($cc, 5%);
  animation-name: light-bck;
  &:before {
    transform-origin: 50% 0;
    transform: rotateY(180deg) rotateX(90deg);
    background: lighten($cc, 15%);
    animation-name: light-top;
  }
  &:after {
    transform-origin: 100% 50%;
    transform: rotateY(90deg) scaleX(-1);
    background: lighten($cc, 5%);
    animation-name: light-l;
  }
}
@keyframes ani {
  25% { transform: rotateY(40deg) rotate(-90deg); }
  50% {
    transform: rotateY(40deg) rotate(-90deg) rotateY(-90deg);
  }
  75% {
    transform: rotateY(40deg) rotate(-90deg) rotateY(-90deg) 
      rotateX(90deg);
  }
  100% {
    transform: rotateY(40deg) rotate(-90deg) rotateY(-90deg) 
      rotateX(90deg) rotate(-90deg);
  }
}
@keyframes light {
  25% { background: lighten($cc, 10%); }
  50% { background: darken($cc, 10%); }
  75%, 100% { background: lighten($cc, 5%); }
}
@keyframes light-bck {
  25% { background: darken($cc, 10%); }
  50% { background: lighten($cc, 15%); }
  75%, 100% { background: $cc; }
}
@keyframes light-l {
  25%, 100% { background: darken($cc, 10%); }
  50%, 75% { background: darken($cc, 5%); }
}
@keyframes light-r {
  25%, 100% { background: lighten($cc, 15%); }
  50%, 75% { background: lighten($cc, 10%); }
}
@keyframes light-top {
  25%, 50% { background: lighten($cc, 5%); }
  75% { background: lighten($cc, 15%); }
  100% { background: darken($cc, 5%); }
}
@keyframes light-btm {
  25%, 50% { background: $cc; }
  75% { background: darken($cc, 10%); }
  100% { background: lighten($cc, 10%); }
}