article.container {
    perspective: 2600px;
  }

.container {
    perspective-origin: 50% -1400px;
  }  

.example {
    transform: rotateY(45deg) translateZ(-100px);
  }  

.default-origin {
    transform-origin: 50% 50% 0;
  }  

.stage {
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateY(-45deg);
    width: 460px;
  }  

.stage div {
    position: absolute;
    transform-style: preserve-3d;
  } 
  
.stage .back-left {
    background-color: #6b522b;
    border-left: 6px solid #574625;
    border-top: 6px solid #8a683d;
    height: 120px;
    transform: rotateY(90deg) translateX(-256px);
    width: 500px;
  }  

.stage .back-right {
    background-color: #9c7442;
    border-right: 6px solid #78552c;
    border-top: 6px solid #b5854a;
    height: 120px;
    transform: translateX(253px) translateZ(3px);
    width: 446px;
  }  

  .stage .platform-left {
    background-color: #bcb3a8;
    border-bottom: 6px solid #857964;
    height: 220px;
    transform: rotateX(90deg) translateY(396px) translateX(253px) translateZ(-13px);
    width: 446px;
  }
  .stage .platform-right {
    background-color: #bcb3a8;
    border-bottom: 6px solid #847660;
    border-right: 6px solid #554c3d;
    height: 164px;
    transform: rotateX(90deg) translateY(88px) translateX(253px) translateZ(-41px);
    width: 446px;
  }
  .stage .pit-left {
    background-color: #4d4233;
    height: 800px;
    width: 447px;
    -webkit-transform: translate3D(254px, 125px, 285px);
    -moz-transform: translate3D(254px, 125px, 285px);
    -ms-transform: translate3D(254px, 125px, 285px);
    -o-transform: translate3D(254px, 125px, 285px);
    transform: translate3D(254px, 125px, 285px);
  }
  .stage .pit-right {
    background-color: #847660;
    height: 800px;    
    width: 451px;
    -webkit-transform: translate3D(254px, 125px, 173px);
    -moz-transform: translate3D(254px, 125px, 173px);
    -ms-transform: translate3D(254px, 125px, 173px);
    -o-transform: translate3D(254px, 125px, 173px);
    transform: translate3D(254px, 125px, 173px);
  }
  .stage .pit-back {
    background-color: #6b522b;
    height: 220px;
    transform: rotateY(90deg) translate3D(-200px, 87px, 168px);
    width: 170px;
  }  

.stage .shadow {
    background-color: transparent;
    box-shadow: -600px 0 50px #afa79f;
    height: 550px;
    transform: rotateX(90deg) translateZ(-166px) translateX(550px);
    width: 550px;
  } 
  
.stage .portal {
    background-color: black;
    border-radius: 44px/62px;
    box-shadow: 0 0 15px 4px white;
    height: 72px;
    width: 48px;
  }  

.stage .portal:before {
    border-radius: 44px/62px;
    border: 4px solid white;
    content: "";
    display: block;
    height: 72px;
    margin-left: -4px;
    margin-top: -4px;
    width: 48px;
  }  

.stage .portal.red {
    background: radial-gradient(#000000, #000000 50%, #ff4640 70%);
    border: 7px solid #ff4640;
    transform: translate3D(223px, 25px, 385px) rotateY(90deg) skewX(5deg);
  }
.stage .portal.blue {
    background: radial-gradient(#000000, #000000 50%, #258aff 70%);
    border: 7px solid #258aff;
    transform: translate3D(586px, 25px, 4px) skewX(-5deg);
  }  

.stage .platform-left span {
  background: -webkit-gradient(radial, 0% 50%, 0, 0% 50%, 90, color-stop(0%, #f5aaa6), color-stop(77.77778%, #c8b8ad), color-stop(100%, #bcb3a8));
  background: -webkit-radial-gradient(left, #f5aaa6, #c8b8ad 70px, #bcb3a8 90px);
  background: -moz-radial-gradient(left, #f5aaa6, #c8b8ad 70px, #bcb3a8 90px);
  background: -o-radial-gradient(left, #f5aaa6, #c8b8ad 70px, #bcb3a8 90px);
  background: radial-gradient(left, #f5aaa6, #c8b8ad 70px, #bcb3a8 90px);
    display: block;
    height: 200px;
    left: 0;
    position: absolute;
    width: 120px;
  }
.stage .platform-right span {
  background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 60, color-stop(0%, #a6eee7), color-stop(66.66667%, #c2cbc1), color-stop(100%, #bcb3a8));
  background: -webkit-radial-gradient(top, #a6eee7, #c2cbc1 40px, #bcb3a8 60px);
  background: -moz-radial-gradient(top, #a6eee7, #c2cbc1 40px, #bcb3a8 60px);
  background: -o-radial-gradient(top, #a6eee7, #c2cbc1 40px, #bcb3a8 60px);
  background: radial-gradient(top, #a6eee7, #c2cbc1 40px, #bcb3a8 60px);
    display: block;
    height: 60px;
    left: 280px;
    position: absolute;
    width: 150px;
  }
  
.stage .door {
    background: #efe8dd;
    border-bottom: 6px solid #bcb3a8;
    border-left: 7px solid #78552e;
    height: 85px;
    transform: translate3D(450px, 34px, 4px);
    width: 65px;
  } 
  
.dude, .dude-shadow {
    height: 100px;
    width: 30px;
  }
.dude figure, .dude-shadow figure {
    background-color: black;
    display: block;
    position: absolute;
  }
.dude figure.head, .dude-shadow figure.head {
    border-radius: 22px;
    height: 20px;
    left: 3px;
    top: 0;
    width: 20px;
  }
.dude figure.body, .dude-shadow figure.body {
    border-radius: 30px 30px 0 0;
    height: 30px;
    top: 21px;
    width: 26px;
  }
.dude figure.body:before, .dude figure.body:after, .dude-shadow figure.body:before, .dude-shadow figure.body:after {
    background-color: black;
    content: "";
    height: 15px;
    position: absolute;
    top: 30px;
    width: 9px;
  }
.dude figure.body:before, .dude-shadow figure.body:before {
    left: 3px;
  }
.dude figure.body:after, .dude-shadow figure.body:after {
    left: 14px;
  }
  
.stage .dude.one {
    transform: translate3D(514px, 50px, 375px) rotateY(78deg);
  }
.stage .dude-shadow.one {
    opacity: 0.1;
    transform: translateX(-12px) rotateX(90deg) translateY(8px);
  }  

.dude.one {
    animation: move-dude-one 10s linear infinite;
    opacity: 0;
  }

.stage .dude.two {
    transform: translate3D(610px, 40px, 5px) rotateY(15deg);
  }
.stage .dude.two figure.arm {
    background: black;
    height: 8px;
    position: absolute;
    top: 20px;
    width: 20px;
  }
.stage .dude.two figure.arm.left {
    left: -15px;
    transform: rotateZ(40deg);
  }
.stage .dude.two figure.arm.right {
    right: -91px;
    transform: rotateZ(-40deg);
  }
.stage .dude-shadow.two {
    opacity: 0.1;
    transform: translateY(38px) translateX(-22px) translateZ(-6px) rotateZ(-90deg) rotateY(90deg) rotateZ(50deg) skewX(30deg) scaleX(0.8);
  } 

.dude.two {
    animation: move-dude-two 10s linear infinite;
    opacity: 0;
  }
  
.dude.two figure.arm {
    animation: arms 10s linear infinite;
    opacity: 0;
  }
  
  @keyframes move-dude-one {
    /* Character flies into scene */
    0% {
      transform: translate3D(514px, -10px, 400px) rotateY(78deg) scaleY(2);
    }
    /* Waits a moment */
    1%, 18% {
      opacity: 1;
      transform: translate3D(514px, 50px, 400px) rotateY(78deg) scaleY(1);
    }
    /* Moves toward the portal */
    34%, 39% {
      opacity: 1;
      transform: translate3D(284px, 40px, 400px) rotateY(78deg);
    }
    /* Pauses, them jumps in */
    41%, 42% {
      opacity: 1;
      transform: translate3D(234px, 40px, 400px) rotateY(78deg);
    }
    /* Vanishes */
    43%, 100% {
      opacity: 0;
      transform: translate3D(234px, 40px, 400px) rotateY(78deg);
    }
  }  

  @keyframes move-dude-two {
    /* Dude be invisible */
    0%, 42% {
      opacity: 0;
      transform: translate3D(610px, 40px, 10px) rotateY(15deg);
    }
    /* Apparato! */
    42.5% {
      display: block;
      opacity: 1;
      transform: translate3D(610px, 40px, 10px) rotateY(15deg);
    }
    /* Move onto the platform */
    46%, 75% {
      opacity: 1;
      transform: translate3D(610px, 40px, 120px) rotateY(15deg);
    }
    /* Stand there for a bit */
    76%, 97% {
      opacity: 0;
      transform: translate3D(610px, -10px, 120px) rotateY(15deg) scaleY(2);
    }
    /* Fly up into the sky! */
    98%, 100% {
      opacity: 0;
      transform: translate3D(610px, -10px, 120px) rotateY(15deg) scaleY(2);
    }
  }
  
  @keyframes arms {
    /* No arms */
    0%, 53% {
      opacity: 0;
    }
    /* Yes arms! */
    54%, 100% {
      opacity: 1;
    }
  }