EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  overflow: hidden;
  perspective: 800px;
  -webkit-perspective: 800px;
  /* for dealing with what is seen above the fold */
  margin-top: -20%;
}

.container {
  width: 900px;
  height: 900px;
  transform: rotateX(90deg);
  transform-style: preserve-3d;
}

.board {
  animation: camera 50.4s 2s linear forwards;
  background-color: #c80;
  width: 900px;
  height: 900px;
  transform: translate3d(400px, 400px, -50px) rotateZ(0deg);
  transform-origin: 50px 750px 0;
  transform-style: preserve-3d;
}

.ceiling {
  background-color: #ccc;
  background-image: repeating-linear-gradient(#888888, #888888 1%, transparent 1%, transparent 24%, #888888 24%, #888888 25%);
  background-size: 100px 100px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: translateZ(100px);
}
.ceiling .tile-top, .ceiling .tile-bottom {
  background-size: 100px 50px;
  display: block;
  width: 100%;
  height: 25px;
}
.ceiling .tile-top {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 24%, #888888 24%, #888888 25%, transparent 25%, transparent 74%, #888888 74%, #888888 75%, transparent 75%, transparent);
}
.ceiling .tile-bottom {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 49%, #888888 49%, #888888 50%);
}

.wall {
  animation: raiseWalls 2s 51.6s linear alternate-reverse forwards, raiseWalls 2s linear alternate;
  background-image: repeating-linear-gradient(#fff, #fff 5%, #900 5%, #900 25%, #fff 25%, #fff 29%, transparent 29%, transparent 50%), repeating-linear-gradient(90deg, #900, #900 23%, #fff 23%, #fff 27%, #900 27%, #900 50%);
  background-size: 100px 100px;
  color: #fff;
  position: absolute;
  height: 100px;
  transform-origin: 0 100%;
}
.wall .wall-half {
  background-image: repeating-linear-gradient(90deg, #fff, #fff 3%, transparent 3%, transparent 48%, #fff 48%, #fff 50%);
  background-size: 100px 100px;
  display: block;
  margin-bottom: 25px;
  width: 100%;
  height: 25px;
}
.wall:nth-of-type(1) {
  bottom: 0px;
  left: 0px;
  width: 900px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(2) {
  bottom: 900px;
  left: 0px;
  width: 900px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(3) {
  bottom: 0px;
  left: 0px;
  width: 900px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(4) {
  bottom: 0px;
  left: 900px;
  width: 900px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(5) {
  bottom: 100px;
  left: 300px;
  width: 200px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(6) {
  bottom: 100px;
  left: 600px;
  width: 300px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(7) {
  bottom: 200px;
  left: 300px;
  width: 300px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(8) {
  bottom: 300px;
  left: 100px;
  width: 200px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(9) {
  bottom: 400px;
  left: 100px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(10) {
  bottom: 400px;
  left: 400px;
  width: 200px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(11) {
  bottom: 400px;
  left: 700px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(12) {
  bottom: 500px;
  left: 0px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(13) {
  bottom: 500px;
  left: 300px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(14) {
  bottom: 500px;
  left: 600px;
  width: 300px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(15) {
  bottom: 600px;
  left: 200px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(16) {
  bottom: 600px;
  left: 400px;
  width: 200px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(17) {
  bottom: 600px;
  left: 700px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(18) {
  bottom: 700px;
  left: 100px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(19) {
  bottom: 700px;
  left: 300px;
  width: 200px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(20) {
  bottom: 700px;
  left: 700px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(21) {
  bottom: 800px;
  left: 100px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(22) {
  bottom: 800px;
  left: 300px;
  width: 100px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(23) {
  bottom: 800px;
  left: 500px;
  width: 300px;
  transform: rotateX(-90deg);
}
.wall:nth-of-type(24) {
  bottom: 0px;
  left: 100px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(25) {
  bottom: 200px;
  left: 100px;
  width: 300px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(26) {
  bottom: 600px;
  left: 100px;
  width: 200px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(27) {
  bottom: 100px;
  left: 200px;
  width: 200px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(28) {
  bottom: 400px;
  left: 200px;
  width: 200px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(29) {
  bottom: 800px;
  left: 200px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(30) {
  bottom: 0px;
  left: 300px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(31) {
  bottom: 400px;
  left: 300px;
  width: 200px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(32) {
  bottom: 200px;
  left: 400px;
  width: 200px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(33) {
  bottom: 500px;
  left: 400px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(34) {
  bottom: 700px;
  left: 400px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(35) {
  bottom: 200px;
  left: 500px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(36) {
  bottom: 400px;
  left: 500px;
  width: 400px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(37) {
  bottom: 300px;
  left: 600px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(38) {
  bottom: 600px;
  left: 600px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(39) {
  bottom: 0px;
  left: 700px;
  width: 200px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(40) {
  bottom: 300px;
  left: 700px;
  width: 200px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(41) {
  bottom: 600px;
  left: 700px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(42) {
  bottom: 200px;
  left: 800px;
  width: 200px;
  transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(43) {
  bottom: 500px;
  left: 800px;
  width: 100px;
  transform: rotateX(-90deg) rotateY(90deg);
}

.marker {
  font: 22pt Helvetica;
  position: absolute;
  opacity: 0.8;
  text-align: center;
  transform-style: preserve-3d;
}

.start {
  background: #ccc;
  bottom: 167px;
  left: 10px;
  width: 80px;
  height: 40px;
  line-height: 40px;
  transform: translateZ(50px) rotateX(-90deg);
  animation: startPoint 2s 51.6s linear alternate-reverse forwards, startPoint 2s linear alternate;
}

.finish {
  background: #ff0;
  border-radius: 50%;
  top: 25px;
  left: 167px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  line-height: 45px;
  transform: translateZ(50px) rotateX(-90deg) rotateY(90deg) rotateZ(90deg);
  animation: finPoint 2s 51.6s linear alternate-reverse forwards, finPoint 2s linear alternate;
}

@keyframes raiseWalls {
  from {
    height: 0;
  }
  to {
    height: 100px;
  }
}
@keyframes startPoint {
  from {
    transform: scale3d(1, 0, 0) translateZ(0px) rotateX(-90deg);
  }
  to {
    transform: scale3d(1, 1, 1) translateZ(50px) rotateX(-90deg);
  }
}
@keyframes finPoint {
  from {
    transform: scale3d(1, 0, 0) translateZ(0px) rotateX(-90deg) rotateY(90deg) rotateZ(90deg);
  }
  to {
    transform: scale3d(1, 1, 1) translateZ(50px) rotateX(-90deg) rotateY(90deg) rotateZ(90deg);
  }
}
@keyframes camera {
  0% {
    transform: translate3d(400px, 400px, -50px) rotateZ(0deg);
    transform-origin: 50px 850px 0;
  }
  1.5873% {
    transform: translate3d(400px, 500px, -50px) rotateZ(0deg);
    transform-origin: 50px 750px 0;
  }
  3.1746% {
    transform: translate3d(400px, 500px, -50px) rotateZ(-90deg);
  }
  4.7619% {
    transform: translate3d(400px, 600px, -50px) rotateZ(-90deg);
    transform-origin: 50px 750px 0;
  }
  6.34921% {
    transform: translate3d(300px, 500px, -50px) rotateZ(-180deg);
    transform-origin: 150px 750px 0;
  }
  7.93651% {
    transform: translate3d(300px, 600px, -50px) rotateZ(-180deg);
    transform-origin: 150px 750px 0;
  }
  9.52381% {
    transform: translate3d(300px, 400px, -50px) rotateZ(-90deg);
    transform-origin: 150px 850px 0;
  }
  11.11111% {
    transform: translate3d(200px, 400px, -50px) rotateZ(-90deg);
    transform-origin: 250px 850px 0;
  }
  12.69841% {
    transform: translate3d(200px, 400px, -50px) rotateZ(0deg);
    transform-origin: 250px 850px 0;
  }
  14.28571% {
    transform: translate3d(200px, 500px, -50px) rotateZ(0deg);
    transform-origin: 250px 850px 0;
  }
  15.87302% {
    transform: translate3d(200px, 500px, -50px) rotateZ(-90deg);
    transform-origin: 250px 750px 0;
  }
  17.46032% {
    transform: translate3d(200px, 600px, -50px) rotateZ(-90deg);
    transform-origin: 250px 750px 0;
  }
  19.04762% {
    transform: translate3d(200px, 700px, -50px) rotateZ(-90deg);
    transform-origin: 250px 750px 0;
  }
  20.63492% {
    transform: translate3d(200px, 800px, -50px) rotateZ(-90deg);
    transform-origin: 250px 750px 0;
  }
  22.22222% {
    transform: translate3d(200px, 900px, -50px) rotateZ(-90deg);
    transform-origin: 250px 750px 0;
  }
  23.80952% {
    transform: translate3d(-200px, 500px, -50px) rotateZ(0deg);
    transform-origin: 650px 750px 0;
  }
  25.39683% {
    transform: translate3d(-200px, 600px, -50px) rotateZ(0deg);
    transform-origin: 650px 750px 0;
  }
  26.98413% {
    transform: translate3d(-200px, 700px, -50px) rotateZ(0deg);
    transform-origin: 650px 750px 0;
  }
  28.57143% {
    transform: translate3d(-200px, 800px, -50px) rotateZ(0deg);
    transform-origin: 650px 750px 0;
  }
  30.15873% {
    transform: translate3d(-200px, 800px, -50px) rotateZ(90deg);
    transform-origin: 650px 450px 0;
  }
  31.74603% {
    transform: translate3d(-100px, 800px, -50px) rotateZ(90deg);
    transform-origin: 550px 450px 0;
  }
  33.33333% {
    transform: translate3d(-100px, 800px, -50px) rotateZ(0deg);
    transform-origin: 550px 450px 0;
  }
  34.92063% {
    transform: translate3d(-100px, 900px, -50px) rotateZ(0deg);
    transform-origin: 550px 450px 0;
  }
  36.50794% {
    transform: translate3d(-100px, 900px, -50px) rotateZ(-90deg);
    transform-origin: 550px 350px 0;
  }
  38.09524% {
    transform: translate3d(-100px, 1000px, -50px) rotateZ(-90deg);
    transform-origin: 550px 350px 0;
  }
  39.68254% {
    transform: translate3d(-200px, 900px, -50px) rotateZ(0deg);
    transform-origin: 650px 350px 0;
  }
  41.26984% {
    transform: translate3d(-200px, 1000px, -50px) rotateZ(0deg);
    transform-origin: 650px 350px 0;
  }
  42.85714% {
    transform: translate3d(-200px, 1100px, -50px) rotateZ(0deg);
    transform-origin: 650px 150px 0;
  }
  44.44444% {
    transform: translate3d(-200px, 1100px, -50px) rotateZ(-90deg);
    transform-origin: 650px 150px 0;
  }
  46.03175% {
    transform: translate3d(-200px, 1200px, -50px) rotateZ(-90deg);
    transform-origin: 650px 150px 0;
  }
  47.61905% {
    transform: translate3d(-200px, 1300px, -50px) rotateZ(-90deg);
    transform-origin: 650px 150px 0;
  }
  49.20635% {
    transform: translate3d(-400px, 1100px, -50px) rotateZ(0deg);
    transform-origin: 850px 150px 0;
  }
  50.79365% {
    transform: translate3d(-400px, 1200px, -50px) rotateZ(0deg);
    transform-origin: 850px 150px 0;
  }
  52.38095% {
    transform: translate3d(-400px, 1200px, -50px) rotateZ(90deg);
    transform-origin: 850px 50px 0;
  }
  53.96825% {
    transform: translate3d(-400px, 1300px, -50px) rotateZ(90deg);
    transform-origin: 850px 50px 0;
  }
  55.55556% {
    transform: translate3d(-400px, 1400px, -50px) rotateZ(90deg);
    transform-origin: 850px 50px 0;
  }
  57.14286% {
    transform: translate3d(-400px, 1500px, -50px) rotateZ(90deg);
    transform-origin: 850px 50px 0;
  }
  58.73016% {
    transform: translate3d(-400px, 1600px, -50px) rotateZ(90deg);
    transform-origin: 850px 50px 0;
  }
  60.31746% {
    transform: translate3d(-400px, 1700px, -50px) rotateZ(90deg);
    transform-origin: 850px 50px 0;
  }
  61.90476% {
    transform: translate3d(-400px, 1800px, -50px) rotateZ(90deg);
    transform-origin: 850px 50px 0;
  }
  63.49206% {
    transform: translate3d(200px, 1200px, -50px) rotateZ(180deg);
    transform-origin: 250px 50px 0;
  }
  65.07937% {
    transform: translate3d(200px, 1300px, -50px) rotateZ(180deg);
    transform-origin: 250px 50px 0;
  }
  66.66667% {
    transform: translate3d(200px, 1400px, -50px) rotateZ(180deg);
    transform-origin: 250px 50px 0;
  }
  68.25397% {
    transform: translate3d(200px, 1000px, -50px) rotateZ(270deg);
    transform-origin: 250px 250px 0;
  }
  69.84127% {
    transform: translate3d(200px, 1100px, -50px) rotateZ(270deg);
    transform-origin: 250px 250px 0;
  }
  71.42857% {
    transform: translate3d(200px, 1200px, -50px) rotateZ(270deg);
    transform-origin: 250px 250px 0;
  }
  73.01587% {
    transform: translate3d(0px, 1000px, -50px) rotateZ(90deg);
    transform-origin: 450px 250px 0;
  }
  74.60317% {
    transform: translate3d(0px, 1100px, -50px) rotateZ(90deg);
    transform-origin: 450px 250px 0;
  }
  76.19048% {
    transform: translate3d(0px, 1200px, -50px) rotateZ(90deg);
    transform-origin: 450px 250px 0;
  }
  77.77778% {
    transform: translate3d(0px, 1300px, -50px) rotateZ(90deg);
    transform-origin: 450px 250px 0;
  }
  79.36508% {
    transform: translate3d(300px, 1000px, -50px) rotateZ(180deg);
    transform-origin: 150px 250px 0;
  }
  80.95238% {
    transform: translate3d(300px, 1100px, -50px) rotateZ(180deg);
    transform-origin: 150px 250px 0;
  }
  82.53968% {
    transform: translate3d(300px, 1200px, -50px) rotateZ(180deg);
    transform-origin: 150px 250px 0;
  }
  84.12698% {
    transform: translate3d(300px, 800px, -50px) rotateZ(0deg);
    transform-origin: 150px 450px 0;
  }
  85.71429% {
    transform: translate3d(300px, 900px, -50px) rotateZ(0deg);
    transform-origin: 150px 450px 0;
  }
  87.30159% {
    transform: translate3d(300px, 900px, -50px) rotateZ(90deg);
    transform-origin: 150px 350px 0;
  }
  88.88889% {
    transform: translate3d(300px, 1000px, -50px) rotateZ(90deg);
    transform-origin: 150px 350px 0;
  }
  90.47619% {
    transform: translate3d(400px, 900px, -50px) rotateZ(0deg);
    transform-origin: 50px 350px 0;
  }
  92.06349% {
    transform: translate3d(400px, 1000px, -50px) rotateZ(0deg);
    transform-origin: 50px 350px 0;
  }
  93.65079% {
    transform: translate3d(400px, 1100px, -50px) rotateZ(0deg);
    transform-origin: 50px 350px 0;
  }
  95.2381% {
    transform: translate3d(400px, 1200px, -50px) rotateZ(0deg);
    transform-origin: 50px 50px 0;
  }
  96.8254% {
    transform: translate3d(400px, 1200px, -50px) rotateZ(-90deg);
    transform-origin: 50px 50px 0;
  }
  98.4127% {
    transform: translate3d(400px, 1300px, -50px) rotateZ(-90deg);
    transform-origin: 50px 50px 0;
  }
  100% {
    transform: translate3d(400px, 1300px, -50px) rotateZ(-90deg);
    transform-origin: 50px 50px 0;
  }
}

HTML

<div class="container">
  <div class="board"><span class="marker start">Start</span><span class="marker finish">: )</span>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="wall"><span class="wall-half"></span><span class="wall-half"></span></div>
    <div class="ceiling"><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span><span class="tile-top"></span><span class="tile-bottom"></span>
    </div>
  </div>
</div>

Recommendation

Join Effecthub.com