<div class="scene">
  
  <div class="converter">

    <div class="conveyor-door conveyor-door--entrance">
      <div class="conveyor-door__top"></div>
      <div class="conveyor-door__front"></div>
      <div class="conveyor-door__back"></div>
      <div class="conveyor-door__left"></div>
      <div class="conveyor-door__right"></div>
    </div>

    <div class="conveyor">
      <div class="conveyor__top"></div>
      <div class="conveyor__front"></div>
      <div class="conveyor__back"></div>
      <div class="conveyor__left"></div>
      <div class="conveyor__right"></div>
    </div>

    <div class="machine">
      <div class="machine__top"></div>
      <div class="machine__front"></div>
      <div class="machine__back"></div>
      <div class="machine__left"></div>
      <div class="machine__right"></div>
    </div>

    <div class="conveyor-door conveyor-door--exit">
      <div class="conveyor-door__top"></div>
      <div class="conveyor-door__front"></div>
      <div class="conveyor-door__back"></div>
      <div class="conveyor-door__left"></div>
      <div class="conveyor-door__right"></div>
    </div>

    <div class="bot-2d">
      <div class="bot-2d__face"></div>
    </div>

    <div class="bot-3d">
      <div class="bot-3d__top"></div>
      <div class="bot-3d__bottom"></div>
      <div class="bot-3d__front"></div>
      <div class="bot-3d__back"></div>
      <div class="bot-3d__left"></div>
      <div class="bot-3d__right"></div>
    </div>
  </div>
  
  <div class="shadow shadow--machine">
    <div class="shadow__face"></div>
  </div>
  
  <div class="shadow shadow--entrance">
    <div class="shadow__face"></div>
  </div>
  
  <div class="shadow shadow--exit">
    <div class="shadow__face"></div>
  </div>
  
</div>
*{
  backface-visibility: hidden;
  border: 0;
  box-sizing: border-box;
  image-rendering: pixelated;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}

@mixin pivot(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50%;
}

@mixin face(
  $texture: 'face-placeholder.jpg',
  $texture-size: 128px,
  $texture-position: 'center',
  $height: 128px,
  $width: 128px
){
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1678849/' + $texture);
  background-position: $texture-position;
  background-size: $texture-size;
  height: $height;
  position: absolute;
  width: $width;
}

@mixin box(
  $pivot-position-x: "center",
  $pivot-position-y: "center",
  $pivot-position-z: "center",
  $depth: 128px,
  $height: 128px,
  $width: 128px,
  $texture: "box-placeholder.jpg",
  $texture-top: $texture,
  $texture-bottom: $texture,
  $texture-left: $texture,
  $texture-right: $texture,
  $texture-front: $texture,
  $texture-back: $texture,
  $texture-size: 128px,
  $top-x: 0,
  $bottom-x: 0,
  $sides-x: 0,
  $top-y: 0,
  $bottom-y: 0,
  $sides-y: 0,
  $top-z: 0,
  $bottom-z: 0,
  $sides-z: 0
){

  @if($pivot-position-z == 'top'){
    $top-z: 0;
    $bottom-z: - $depth;
    $sides-z: - $depth /2;
  }@else if($pivot-position-z == 'center'){
    $top-z: $depth / 2;
    $bottom-z: - $depth / 2;
    $sides-z: 0;
  }@else{
    $top-z: $depth;
    $bottom-z: 0;
    $sides-z: $depth /2;
  }

  @if($pivot-position-y == 'top'){
    $top-y: 0;
    $bottom-y: 0;
    $sides-y: calc( -50% + #{$height / 2});
  }@else if($pivot-position-y == 'center'){
    $top-y: -50%;
    $bottom-y: -50%;
    $sides-y: -50%;
  }@else{
    $top-y: -$height;
    $bottom-y: -$height;
    $sides-y: calc( -50% - #{$height / 2});
  }

  @if($pivot-position-x == 'left'){
    $top-x: 0;
    $bottom-x: 0;
    $sides-x: calc( -50% + #{$width / 2});
  }@else if($pivot-position-x == 'center'){
    $top-x: -50%;
    $bottom-x: -50%;
    $sides-x: -50%;
  }@else{
    $top-x: -$width;
    $bottom-x: -$width;
    $sides-x: calc( -50% - #{$width / 2});
  }

  @include pivot;

  &__top{
    @include face(
      $texture-top,
      $texture-size,
      center,
      $height,
      $width
    );
    transform: translate3d($top-x, $top-y, $top-z);
  }

  &__bottom{
    @include face(
      $texture-bottom,
      $texture-size,
      center,
      $height,
      $width
    );
    transform: translate3d($bottom-x, $bottom-y, $bottom-z);
  }

  &__front{
    @include face(
      $texture-front,
      $texture-size,
      top center,
      $depth,
      $width
    );
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateY( $height / 2 )
    rotateX(270deg);
  }

  &__back{
    @include face($texture-back, $texture-size, top center, $depth, $width);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateY( -$height / 2 )
    rotateX(270deg)
    rotateY(180deg);
  }

  &__left {
    @include face($texture-left, $texture-size, top center, $depth, $height);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateX( $width / 2 )
    rotateX(270deg)
    rotateY(90deg);
  }

  &__right{
    @include face($texture-right, $texture-size, top center, $depth, $height );
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateX( -$width / 2 )
    rotateX(270deg)
    rotateY(270deg);
  }
}

body{
  background: linear-gradient(to bottom, #7f59cc 0%,#764bcc 30%,#8561cc 30%,#8965cc 100%);
  box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
  height: 100vh;
  overflow: hidden;
  perspective: 900px;
  width: 100vw;
}

.scene{
  @include pivot;
  transform: rotateX(72deg) rotateZ(15deg);
}

.converter{
  @include pivot;
  animation: bob 2s infinite linear alternate;
}

@keyframes bob{
  0%{ transform: translateZ(0)}
  100%{ transform: translateZ(-20px)}
}

.machine{
  @include box(
    $pivot-position-z: 'center',
    $depth: 240px,
    $height: 154px,
    $width: 154px,
    $texture-size: cover,
    $texture-top: "converter-top.gif",
    $texture-front: "converter-front.gif",
    $texture-left: "converter-side.gif",
    $texture-right: "converter-side.gif",
  );
}

.conveyor-door{
  @include box(
    $pivot-position-z: 'center',
    $depth: 144px,
    $height: 96px,
    $width: 96px,
    $texture-size: cover,
    $texture-top: "converter-top.gif",
    $texture-front: "converter-door.gif",
    $texture-left: "converter-side.gif",
    $texture-right: "converter-side.gif",
  );
}

.conveyor-door--entrance{
  transform: translateX(-256px);
}

.conveyor-door--exit{
  transform: translateX(256px);
}

.conveyor{
  @include box(
    $pivot-position-z: 'center',
    $depth: 32px,
    $height: 80px,
    $width: 512px,
    $texture-size: 32px,
    $texture: "belt-side.gif",
    $texture-top: "belt.gif"
  );

  transform: translateZ(-24px);
}

.bot-3d{
  @include box(
    $pivot-position-z: 'bottom',
    $depth: 27px,
    $height: 54px,
    $width: 27px,
    $texture-bottom: "robot-bottom.gif",
    $texture-top: "robot-top.png",
    $texture-left: "robot-side.png",
    $texture-right: "robot-side.png",
    $texture-front: "robot-cap.png",
    $texture-back: "robot-cap.png",
    $texture-size: cover
  );
  animation: bot3d 4s infinite linear;

  .bot-3d__bottom{
    height: 78px;
    width: 51px;
    transform: translate3d(-50%, -50%, 13px);
  }
}

@keyframes bot3d{
  0%{ transform: rotateX(-90deg) translate3D(0,-30px,0px)}
  50%{ transform: rotateX(-90deg) translate3D(0,-30px,0px)}
  100%{ transform: rotateX(-90deg) translate3D(256px,-30px,0)}
}

.bot-2d{
  @include pivot;
  animation: bot2d 4s infinite linear;
}

.bot-2d__face{
  @include face(
    'robot-bottom.gif',
    cover,
    center,
    78px,
    51px
  );
  transform: translateY(-50%) translateX(-50%);
}

@keyframes bot2d{
  0%{ transform: translate3D(-256px,0,-8px)}
  50%{transform: translate3D(0,0,-8px)}
  100%{ transform: translate3D(0,0,-8px)}
}

.shadow{
  @include pivot;
}

.shadow__face{
  animation: shadow 2s alternate infinite linear;
  background: black;
  border-radius: 50%;
  box-shadow: 0 0 10px 5px rgba(0,0,0,1);
  height: 64px;
  width: 64px;
  opacity: 0.2;
}

.shadow--machine{
  transform: translate3D(0, 0, -170px);  
}

.shadow--entrance{
  transform: scale(0.75) translate3D(-340px, 0, -170px);
}

.shadow--exit{
  transform: scale(0.75) translate3D(320px, 0, -170px);
}

@keyframes shadow{
  0%{
    opacity: 0.05;
    transform: translateX(-50%) scale(0.5);
  }100%{
    opacity: 0.1;
    transform: translateX(-50%) scale(1);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.