body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #111;
}

.kaleidoscope {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.kaleidoscope .tile {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  overflow: hidden;
  height: 100%;
  width: 50%;
  transform-origin: right top;
}

.kaleidoscope .tile .image {
  position: relative;
  top: 0;
  left: 100%;
  height: 100%;
  width: 100%;
  background-size: cover;
  transform-origin: left top;
}

.kaleidoscope.n8 .tile {
  display: block;
}

.kaleidoscope.n8 .tile .image {
  transform: rotate(22.5deg);
}

.kaleidoscope.n8 .t0  { transform: rotate(0deg); }
.kaleidoscope.n8 .t1  { transform: scale(-1, 1) rotate(0deg); }
.kaleidoscope.n8 .t2  { transform: rotate(45deg); }
.kaleidoscope.n8 .t3  { transform: scale(-1, 1) rotate(45deg); }
.kaleidoscope.n8 .t4  { transform: rotate(90deg); }
.kaleidoscope.n8 .t5  { transform: scale(-1, 1) rotate(90deg); }
.kaleidoscope.n8 .t6  { transform: rotate(135deg); }
.kaleidoscope.n8 .t7  { transform: scale(-1, 1) rotate(135deg); }
.kaleidoscope.n8 .t8  { transform: rotate(180deg); }
.kaleidoscope.n8 .t9  { transform: scale(-1, 1) rotate(180deg); }
.kaleidoscope.n8 .t10 { transform: rotate(225deg); }
.kaleidoscope.n8 .t11 { transform: scale(-1, 1) rotate(225deg); }
.kaleidoscope.n8 .t12 { transform: rotate(270deg); }
.kaleidoscope.n8 .t13 { transform: scale(-1, 1) rotate(270deg); }
.kaleidoscope.n8 .t14 { transform: rotate(315deg); }
.kaleidoscope.n8 .t15 { transform: scale(-1, 1) rotate(315deg); }