body {
  -webkit-perspective: 2000;
  background-color: gray;
}

#boxes {
  width: 80%;
  margin: 10%;
  padding: 0;
  list-style: none;
  -webkit-transform: rotateY(7deg);
  -webkit-transform-style: preserve-3d;
}

#boxes * {
  -webkit-transition: all .5s;
}

#boxes li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
  border: 3px solid black;
  background-color: black;
  text-align: center;
  position: relative;
  -webkit-transform-style: preserve-3d;
}

#boxes li::before {
  content: '';
  display: block;
  width: 106px;
  height: 106px;
  position: absolute;
  top: -3px;
  left: -3px;
  background-color: #222;
  -webkit-transform: translateX(-53px) translateZ(-53px) rotateY(-90deg);
}

#boxes li::after {
  content: '';
  display: block;
  width: 106px;
  height: 106px;
  position: absolute;
  top: -3px;
  left: -3px;
  background-color: #444;
  -webkit-transform: translateY(-53px) translateZ(-53px) rotateX(90deg);
}

#boxes li:hover {
  -webkit-transform: translateZ(50px);
}

#boxes li img {
  max-height: 100px;
  max-width: 100px;
}