body {
  font-size: 62.5%;
  background: black;
  font-family: Monospace;
}

* {
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.flex {
  margin: 10rem auto;
  position: relative;
  transform-style: preserve-3d;
  justify-content: center;
  perspective: 75vw;
  transform: rotateX(10deg);
}

.item {
  width: 16vw;
  height: 16vw;
  line-height: 16vw;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  left: 45%;
  position: absolute;
  display: inline;
  background: #0af;
  opacity: 1;
  border-radius: 2vw;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -75vw;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: .5vw solid #000;
  box-shadow: 0 0 10vw -0.5vw rgba(255, 255, 255, 0.7);
}
.item::after {
  height: 16vw;
  width: 16vw;
  content: "";
  position: absolute;
  background: yellow;
  border-radius: .3rem;
  left: 0;
  top: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  border: .5vw solid #000;
  box-shadow: 0 0 10vw -0.5vw rgba(255, 255, 255, 0.7);
}

.item1 {
  transform: rotateY(18deg);
  animation: 20s ease-in-out infinite carousel1;
  background-image: url("http://www.adammcquaid.ca/gallery/1.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel1 {
  from {
    transform: rotateY(18deg);
  }
  to {
    transform: rotateY(378deg);
  }
}
.item2 {
  transform: rotateY(36deg);
  animation: 20s ease-in-out infinite carousel2;
  background-image: url("http://www.adammcquaid.ca/gallery/2.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel2 {
  from {
    transform: rotateY(36deg);
  }
  to {
    transform: rotateY(396deg);
  }
}
.item3 {
  transform: rotateY(54deg);
  animation: 20s ease-in-out infinite carousel3;
  background-image: url("http://www.adammcquaid.ca/gallery/3.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel3 {
  from {
    transform: rotateY(54deg);
  }
  to {
    transform: rotateY(414deg);
  }
}
.item4 {
  transform: rotateY(72deg);
  animation: 20s ease-in-out infinite carousel4;
  background-image: url("http://www.adammcquaid.ca/gallery/4.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel4 {
  from {
    transform: rotateY(72deg);
  }
  to {
    transform: rotateY(432deg);
  }
}
.item5 {
  transform: rotateY(90deg);
  animation: 20s ease-in-out infinite carousel5;
  background-image: url("http://www.adammcquaid.ca/gallery/5.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel5 {
  from {
    transform: rotateY(90deg);
  }
  to {
    transform: rotateY(450deg);
  }
}
.item6 {
  transform: rotateY(108deg);
  animation: 20s ease-in-out infinite carousel6;
  background-image: url("http://www.adammcquaid.ca/gallery/0.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel6 {
  from {
    transform: rotateY(108deg);
  }
  to {
    transform: rotateY(468deg);
  }
}
.item7 {
  transform: rotateY(126deg);
  animation: 20s ease-in-out infinite carousel7;
  background-image: url("http://www.adammcquaid.ca/gallery/7.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel7 {
  from {
    transform: rotateY(126deg);
  }
  to {
    transform: rotateY(486deg);
  }
}
.item8 {
  transform: rotateY(144deg);
  animation: 20s ease-in-out infinite carousel8;
  background-image: url("http://www.adammcquaid.ca/gallery/8.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel8 {
  from {
    transform: rotateY(144deg);
  }
  to {
    transform: rotateY(504deg);
  }
}
.item9 {
  transform: rotateY(162deg);
  animation: 20s ease-in-out infinite carousel9;
  background-image: url("http://www.adammcquaid.ca/gallery/9.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel9 {
  from {
    transform: rotateY(162deg);
  }
  to {
    transform: rotateY(522deg);
  }
}
.item10 {
  transform: rotateY(180deg);
  animation: 20s ease-in-out infinite carousel10;
  background-image: url("http://www.adammcquaid.ca/gallery/10.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel10 {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(540deg);
  }
}
.item11 {
  transform: rotateY(198deg);
  animation: 20s ease-in-out infinite carousel11;
  background-image: url("http://www.adammcquaid.ca/gallery/11.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel11 {
  from {
    transform: rotateY(198deg);
  }
  to {
    transform: rotateY(558deg);
  }
}
.item12 {
  transform: rotateY(216deg);
  animation: 20s ease-in-out infinite carousel12;
  background-image: url("http://www.adammcquaid.ca/gallery/12.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel12 {
  from {
    transform: rotateY(216deg);
  }
  to {
    transform: rotateY(576deg);
  }
}
.item13 {
  transform: rotateY(234deg);
  animation: 20s ease-in-out infinite carousel13;
  background-image: url("http://www.adammcquaid.ca/gallery/13.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel13 {
  from {
    transform: rotateY(234deg);
  }
  to {
    transform: rotateY(594deg);
  }
}
.item14 {
  transform: rotateY(252deg);
  animation: 20s ease-in-out infinite carousel14;
  background-image: url("http://www.adammcquaid.ca/gallery/14.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel14 {
  from {
    transform: rotateY(252deg);
  }
  to {
    transform: rotateY(612deg);
  }
}
.item15 {
  transform: rotateY(270deg);
  animation: 20s ease-in-out infinite carousel15;
  background-image: url("http://www.adammcquaid.ca/gallery/15.png");
  background-position: center;
  background-size: cover;
}

@keyframes carousel15 {
  from {
    transform: rotateY(270deg);
  }
  to {
    transform: rotateY(630deg);
  }
}
.item16 {
  transform: rotateY(288deg);
  animation: 20s ease-in-out infinite carousel16;
  background-image: url("http://www.adammcquaid.ca/gallery/16.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel16 {
  from {
    transform: rotateY(288deg);
  }
  to {
    transform: rotateY(648deg);
  }
}
.item17 {
  transform: rotateY(306deg);
  animation: 20s ease-in-out infinite carousel17;
  background-image: url("http://www.adammcquaid.ca/gallery/17.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel17 {
  from {
    transform: rotateY(306deg);
  }
  to {
    transform: rotateY(666deg);
  }
}
.item18 {
  transform: rotateY(324deg);
  animation: 20s ease-in-out infinite carousel18;
  background-image: url("http://www.adammcquaid.ca/gallery/18.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel18 {
  from {
    transform: rotateY(324deg);
  }
  to {
    transform: rotateY(684deg);
  }
}
.item19 {
  transform: rotateY(342deg);
  animation: 20s ease-in-out infinite carousel19;
  background-image: url("http://www.adammcquaid.ca/gallery/19.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel19 {
  from {
    transform: rotateY(342deg);
  }
  to {
    transform: rotateY(702deg);
  }
}
.item20 {
  transform: rotateY(360deg);
  animation: 20s ease-in-out infinite carousel20;
  background-image: url("http://www.adammcquaid.ca/gallery/20.jpg");
  background-position: center;
  background-size: cover;
}

@keyframes carousel20 {
  from {
    transform: rotateY(360deg);
  }
  to {
    transform: rotateY(720deg);
  }
}