.cube {
  transform: translate3d(-50%, -100%, 0) rotateX(-90deg);
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.cube.borders .side {
  box-shadow: inset 0 0 0px 1px black;
}

.side {
  background-image: url('../images/environment.jpg');
  background-repeat: no-repeat;
  background-size: 400% 300%;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateX(99.9%) rotateY(-90deg);
}

.cube.grid .side {
  background-image: url('../images/grid.jpg'), url('../images/environment.jpg');
  background-blend-mode: lighten;
}

.cube .top {
  background-position: 33.33% 0%;
  transform-origin: bottom;
  transform: translateY(-99.9%) rotateX(-90deg);
}

.cube .bottom {
  background-position: 33.33% 100%;
  transform-origin: top;
  transform: translateY(99.9%) rotateX(90deg);
}

.cube .front {
  transform: translateX(0%);
  background-position: 0% 50%;
}

.cube .left {
  background-position: 33.33% 50%;
}

.cube .back {
  background-position: 66.66% 50%;
}

.cube .right {
  background-position: 99.99% 50%;
}