html {
  perspective: 500px;
  -webkit-perspective: 500px;
  background: black;
}

html,
html::before,
html::after,
head,
head::before,
head::after,
body,
body::before,
body::after {
  padding: 0;
  margin: 0;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-size: 400px;
}

html {
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin: -100px;
  animation: 10s move ease-in-out alternate infinite;
  -webkit-animation: 1s move ease-in-out alternate infinite;
}
/* left shadow */

body {
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 200px;
  margin: -100px -600px;
  transform: translateX(-99px) rotateY(90deg);
  -webkit-transform: translateX(-99px) rotateY(90deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
/* left */

body::after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(http://tunnel.db13.us/bg_01.gif);
  transform: translateZ(-1px);
  -webkit-transform: translateZ(-1px);
  animation: 2s left linear infinite;
  -webkit-animation: 2s left linear infinite;
}
/* right shadow */

body::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateZ(198px);
  -webkit-transform: translateZ(198px);
  z-index: 1;
}
/* ceiling shadow */

head {
  top: 50%;
  left: 50%;
  width: 200px;
  height: 1200px;
  margin: -600px -100px;
  transform: translateY(-100px) rotateX(90deg);
  -webkit-transform: translateY(-100px) rotateX(90deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
/* right */

head::before {
  top: 0px;
  left: 0;
  width: 1200px;
  height: 200px;
  background-image: url(http://db13.us/imgs/backgrounds/bg_01.gif);
  transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(90deg);
  -webkit-transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(90deg);
  animation: 2s right linear infinite;
}
/* ceiling */

head::after {
  top: 0px;
  left: -10px;
  right: -10px;
  bottom: 0px;
  background-image: url(http://db13.us/imgs/backgrounds/bg_01.gif);
  animation: 20s top linear infinite;
}
/* floor */

html::before {
  top: 50%;
  left: 0;
  width: 220px;
  height: 1200px;
  margin: -600px -110px;
  background-image: url(http://db13.us/imgs/backgrounds/bg_01.gif);
  transform: translateY(101px) rotateX(120deg);
  -webkit-transform: translateY(101px) rotateX(120deg);
  animation: 5s bottom linear infinite;
  -webkit-animation: 5s bottom linear infinite;
}
/* floor shadow */

html::after {
  top: 50%;
  left: 50%;
  width: 200px;
  height: 1200px;
  margin: -600px -100px;
  transform: translateY(100px) rotateX(10deg);
  -webkit-transform: translateY(100px) rotateX(10deg);
}

@keyframes left {
  0% {
    transform: translateZ(-20px);
    -webkit-transform: translateZ(-20px);
  }
  100% {
    transform: translateZ(-100px) translateX(-400px);
    -webkit-transform: translateZ(-100px) translateX(-400px);
  }
}

@keyframes top {
  from {
    transform: translateZ(1px);
    -webkit-transform: translateZ(1px);
  }
  to {
    transform: translateY(400px) translateZ(1px);
    -webkit-transform: translateY(400px) translateZ(1px);
  }
}

@keyframes bottom {
  from {
    transform: translateY(101px) rotateX(90deg);
    -webkit-transform: translateY(101px) rotateX(90deg);
  }
  to {
    transform: translateZ(400px) translateY(101px) rotateX(120deg);
    -webkit-transform: translateZ(400px) translateY(101px) rotateX(120deg);
  }
}

@keyframes right {
  from {
    transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(-270deg);
    -webkit-transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(-270deg);
  }
  to {
    transform: translateX(-400px) translateY(1000px) translateZ(-100px) rotateY(90deg) rotateZ(-90deg);
    -webkit-transform: translateX(-400px) translateY(1000px) translateZ(-100px) rotateY(90deg) rotateZ(-90deg);
  }
}

@keyframes move {
  0% {
    transform: translateX(-250px) translateY(150px) scale(10) rotateZ(5deg);
    -webkit-transform: translateX(-250px) translateY(150px) scale(10) rotateZ(5deg);
  }
  50% {
    transform: translateX(250px) translateY(-150px) scale(.8) rotateZ(-5deg);
    -webkit-transform: translateX(250px) translateY(-150px) scale(.8) rotateZ(-5deg);
  }
  200% {
    transform: translateX(120px) translateY(100px) scale(2) rotateZ(-2deg);
    -webkit-transform: translateX(120px) translateY(100px) scale(2) rotateZ(-2deg);
  }
}