mixin box
  .front
  .back
  .left
  .right
  .top
  .bottom

.figure
  .head
    +box
  .body
    +box
  .left_arm
    +box
  .right_arm
    +box
  .left_leg
    +box
  .right_leg
    +box

// Global variables
$figure_width: 200px;
$figure_height: 440px;
$animation_duration: 5s;

// Set the container
.figure {
  // Align center
  position: absolute;
  left: 50%;
	top: 50%;
  width: $figure_width;
  height: $figure_height;
  margin-left: -$figure_width/2;
  margin-top: -$figure_height/2;
  
  // Set up 3D and rotation
  transform-origin: center center;
  transform-style: preserve-3d;
  transform: rotateX( -10deg ) rotateY( -20deg ) ;
  animation: rotateFigure $animation_duration infinite linear;
  // perspective: 1000px;
}

// Define how a box should be rendered
@mixin box($part, $width, $height, $depth, $color) {
  width: $width;
  height: $height;
  position: absolute;
  transform-style: preserve-3d;
  
  div {
    background-color: $color;
    position: absolute;
    backface-visibility: hidden;
  }
  
  // Set up side dimensions
  .front,
  .back   { 
    width: $width; 
    height: $height; 
  }
  .right,
  .left   { 
    left: ($width - $depth) / 2; 
    width: $depth; 
    height: $height; 
  }
  .top,
  .bottom { 
    width: $width; 
    top: ($height - $depth) / 2; 
    height: $depth; 
  }

  // Align side in 3D space
  .front  { transform: rotateY(   0deg ) translateZ( $depth / 2 ); }
  .back   { transform: rotateX( 180deg ) translateZ( $depth / 2 ); }
  .right  { transform: rotateY(  90deg ) translateZ( $width / 2 ); }
  .left   { transform: rotateY( -90deg ) translateZ( $width / 2 ); }
  .top    { transform: rotateX(  90deg ) translateZ( $height / 2 ); }
  .bottom { transform: rotateX( -90deg ) translateZ( $height / 2 ); }
  
  // Animate side color
  .front  { animation: animate_#{$part} $animation_duration linear infinite;}
  .back   { animation: animate_#{$part} $animation_duration linear $animation_duration / 2 + infinite; }
  .right  { animation: animate_#{$part} $animation_duration linear $animation_duration / 4 * 3 infinite; }
  .left   { animation: animate_#{$part} $animation_duration linear $animation_duration / 4 * 1 infinite; }
  
  @keyframes animate_#{$part} {
      0% { background-color: $color; }
     50% { background-color: darken($color, 30%); }
    100% { background-color: $color; }
  }
}

// Defined body parts
$head: (
  color: #ccc,
  
  top: 0px,
  left: ($figure_width - 65) / 2,
  width: 65px,
  height: 65px,
  depth: 65px
);

$body: (
  color: red,
  
  top: 80px,
  left: ($figure_width - 100) / 2,
  width: 100px,
  height: 150px,
  depth: 50px
);
$left_arm: (
  color: red,
  
  top: 90px,
  left: $figure_width / 2 - 30 - 60,
  width: 30px, 
  height: 200px, 
  depth: 30px
);
$right_arm: (
  color: red,
  
  top: 90px,
  left: $figure_width / 2 + 60,
  width: 30px, 
  height: 200px, 
  depth: 30px
);
$left_leg: (
  color: brown,
  
  top: 240px,
  left: $figure_width / 2 - 40 - 10,
  width: 40px, 
  height: 200px, 
  depth: 50px
);
$right_leg: (
  color: brown,
  
  top: 240px,
  left: $figure_width / 2 + 10,
  width: 40px, 
  height: 200px, 
  depth: 50px
);
$parts: (
  head: $head,
  body: $body,
  left_arm: $left_arm, 
  right_arm: $right_arm,
  left_leg: $left_leg, 
  right_leg: $right_leg
);

// Render each body part as a box
@each $part, $value in $parts {

  .#{$part} {  
    $w: map-get($value, width);
    $h: map-get($value, height);
    $d: map-get($value, depth);
    $c: map-get($value, color);
    @include box($part, $w, $h, $d, $c);

    top: map-get($value, top);
    left: map-get($value, left);
  }
}

@keyframes rotateFigure {
    0% { transform: rotateX( -10deg ) rotateY( 0deg ) }
  100% { transform: rotateX( -10deg ) rotateY( 360deg ) }
}