Isometric Paperboy

index.haml

.wrap
 .inner
  - 21.times do
   .block
    .front
    .side
  .paperboy
   .inner
  .paperboy.chase
   .dog
    .sprites
  .worker

isometric-paperboy.markdown

Isometric Paperboy

3d isometric rendition of Paperboy, with some spritesheet animations for funsies

A Pen by Adam Kuhn on CodePen.

License.

style.scss

$t: #eae8df;
$c: #f5f3ec;
$p: #6d4fe1;
$b: #424142;
$bl: #200be4;
$re: #ff0017;
$lb: #c4e0e5;
$br: #826343;
$w: #fff;
$r: url('https://puu.sh/A53Ij/e0be199a5c.png');
$y: #fddb4d;
$g: url('https://puu.sh/A53pQ/81e0be02fe.png');
$grr: repeating-linear-gradient(to right, #a5a2a5 20px, #222 20px, #222 21px, #a5a2a5 22px, #a5a2a5 60px);
$gru: repeating-linear-gradient(to bottom, #a5a2a5 30px, #222 30px, #222 31px, #a5a2a5 33px, #a5a2a5 79px);
$bg: url('https://puu.sh/A53rL/44c1f34587.png');

$blocks:
  // width, length, left, top, color, layer, height
	(410, 400, 20, 0, $g, 1, 60)
  (210, 30, 130, 70, $grr, 3, 3)
  (210, 30, 130, 300, $grr, 3, 3)
  (30, 260, 100, 70, $gru, 3, 3)
  (30, 260, 340, 70, $gru, 3, 3)
  (240, 90, 100, 310, $b, 3, 2)
  (240, 90, 100, 0, $b, 3, 2)
  (90, 400, 20, 0, $b, 3, 2)
  (90, 400, 340, 0, $b, 3, 2)
  (60, 20, 140, 270, $bg, 3, 15)
  (60, 20, 270, 270, $bg, 3, 15)
  (180, 130, 140, 120, $y, 3, 50)
  (200, 150, 130, 110, $r, 4.5, 10)
  (5, 5, 250, 270, $w, 3, 15)
  (10, 25, 247.5, 270, $bl, 3.5, 10)
  (25, 1, 220, 250, $re, 3, 35)
  (25, 1, 170, 120, $lb, 3.25, 25)
  (25, 1, 270, 120, $lb, 3.25, 25)
  (25, 1, 220, 120, $lb, 3.25, 25)
  (25, 1, 170, 250, $lb, 3.25, 25)
  (25, 1, 270, 250, $lb, 3.25, 25)

  
  
	
  ;

@mixin block($width, $length, $x, $y, $color, $layer, $height){
  position:absolute;
  width:$width + px;
  height:$length + px;
  left:$x + px;
  top:$y + px;
  background:$color;
  transform-style:preserve-3d;
  transform:translateZ($layer * 30px);
  &:before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:$color;
    transform-style:preserve-3d;
    transform:translateZ($height + px);
  }
  .front{
    position:absolute;
    transform-style:preserve-3d;
    width:100%;
    height:$height + px;
    background:$color;
    box-shadow:inset 0 0 0 10000px rgba(0,0,0,0.35);
    bottom:0;
    left:0;
    transform-origin:50% 0%;
    transform:rotateX(90deg) translateZ(($height * -1) + px);
    &:before{
      content:'';
      position:absolute;
      width:100%;
      height:100%;
      background:inherit;
      transform:translateZ($length + px);
      box-shadow:inset 0 0 0 10000px rgba(0,0,0,0.35);
    }
  }
  .side{
    position:absolute;
    transform-style:preserve-3d;
    width:$height + px;
    height:100%;
    background:$color;
    box-shadow:inset 0 0 0 10000px rgba(0,0,0,0.25);
    bottom:0px;
    left:0;
    transform-origin:0% 50%;
    transform:translateZ($height + px) rotateY(90deg);
    &:before{
      content:'';
      position:absolute;
      width:100%;
      height:100%;
      background:inherit;
      transform:translateZ($width + px);
      box-shadow:inset 0 0 0 10000px rgba(0,0,0,0.25);
        
    }
  }
}



body{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: radial-gradient(circle at center, #222, #000);
  perspective:4000px;
  .wrap{
    width:500px;
    height:350px;
    transform-style:preserve-3d;
    will-change:transform;
    transition:0.5s ease-in-out;
    transform:rotate(-45deg) rotateX(45deg) rotateY(45deg) translateY(50px) translateX(-25px);
    &:hover{
      transform:translateZ(500px) rotate(-45deg) rotateX(45deg) rotateY(45deg) translateY(50px) translateX(-25px);
    }
    .inner{
      position:absolute;
      width:100%;
      height:100%;
      transform-style:preserve-3d;
      animation:spin 10s ease-in-out infinite;
      animation-delay:0.5s;
      transform-origin:45% 55%;
      .worker{
        position:absolute;
        width:30px;
        height:40px;
        transform:rotateX(-90deg) translateZ(60px) translateY(-120px) translateX(150px);
        background:url('https://puu.sh/A58g9/5fe062fc6f.png');
        background-position: -67px 355px;
        animation: ride3 0.15s steps(2, end) infinite;
        @keyframes ride3{
          to{
            background-position: -120px 355px;
          }
         }
      }
      .paperboy{
        position:absolute;
        width:42px;
        height:50px;
        transition:0.5s ease-in-out;
        
        transform:rotateX(-90deg) translateZ(240px) translateY(-120px) translateX(30px);
        top:100px;
        transform-style:preserve-3d;
        animation:move 10s linear infinite;
        @keyframes move{
          25%{
            transform:rotateX(-90deg) translateZ(240px) translateY(-120px) translateX(380px);
          }
          50%{
            transform:rotateX(-90deg) translateZ(-100px) translateY(-120px) translateX(380px);
          }
          75%{
            transform:rotateX(-90deg) translateZ(-100px) translateY(-120px) translateX(30px);
          }
          
          100%{
            transform:rotateX(-90deg) translateZ(240px) translateY(-120px) translateX(30px);
          }
        }
        .dog{
          transform-origin:45% 0%;
          &:before{
            display:none;
          }
          .sprites{
            animation:catchup 1s ease-in-out infinite alternate;
            @keyframes catchup{
              to{
                transform:translateZ(20px) translateX(30px);
              }
            }
            &:before{
              content:'';
              position:absolute;
              width:45px;
              height:30px;
              background:url('https://puu.sh/A58g9/5fe062fc6f.png');
              left:-50px;
              top:20px;
              transform:translateZ(30px);
              background-position: 20px 315px;
              animation: ride2 0.25s steps(2, end) infinite;
              @keyframes ride2{
                to{
                  background-position: 30px 315px;
                }
              }
            }
          }
        }
        .inner, .dog{
          position:absolute;
          width:100%;
          height:100%;
          animation:turn 10s ease-in-out infinite;
          transform-style:preserve-3d;
          @keyframes turn{
            0%{
              transform:rotateY(-20deg);
            }
            22%{
              transform:rotateY(-20deg);
            }
            25%{
              transform:rotateY(70deg);
            }
            46%{
              transform:rotateY(70deg);
            }
            50%{
              transform:rotateY(160deg);
            }
            72%{
              transform:rotateY(160deg);
            }
            75%{
              transform:rotateY(250deg);
            }
            100%{
              transform:rotateY(250deg);
            }
          }
          &:before{
          content:'';
          position:absolute;
          width:100%;
          height:100%;
          background:url('https://puu.sh/A54M3/626aaab72b.png');
          background-position: 260px -4px;
          animation: ride 0.5s steps(4, end) infinite;
        @keyframes ride{
          to{
            background-position: 96px -4px;
          }
        }
        }
        }
      }
      @keyframes spin{
        0%{
          transform:rotate(0deg);
        }
        12.5%{
          transform:rotate(0deg);
        }
        25%{
          transform:rotate(90deg);
        }
        37.5%{
          transform:rotate(90deg);
        }
        50%{
          transform:rotate(180deg);
        }
        62.5%{
          transform:rotate(180deg);
        }
        75%{
          transform:rotate(270deg);
        }
        87.5%{
          transform:rotate(270deg);
        }
        100%{
          transform:rotate(360deg);
        }
      }
    }
    .block{
      @for $b from 1 through length($blocks) {
      &:nth-of-type(#{$b}){
        @include block(
          nth(nth($blocks, $b), 1),
          nth(nth($blocks, $b), 2),
          nth(nth($blocks, $b), 3),
          nth(nth($blocks, $b), 4),
          nth(nth($blocks, $b), 5),
          nth(nth($blocks, $b), 6),
          nth(nth($blocks, $b), 7)
        );
      }
        &:first-of-type{
          .front{
            box-shadow:inset 0 50px 0px -5px $br;
            &:before{
              box-shadow:inset 0 50px 0px -5px $br;
            }
          }
          .side{
            box-shadow:inset -50px 0 0px -5px darken($br, 5%);
            &:before{
              box-shadow:inset -50px 0 0px -5px darken($br, 5%);
            }
          }
        }
	}
    }
  }
}