/* if you do not have this, you will see a
vertical scrollbar on the .parallax div */
body {
  margin: 0;
}

.parallax {
  height: 100%;
  overflow-x: hidden;

  perspective: 1px;
}

.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.layer1 {
  transform: translateZ(0);
}

.layer2 {
  transform: translateZ(-1px);
}

.layer3 {
  transform: translateZ(-2px);
}

/* specific to this implementation */

.parallax-layer.layer1 {
  width: 50%;
  height: 100rem;

  background-color: red;
}

.parallax-layer.layer2 {
  top: 10rem;
  width: 80%;
  height: 50rem;

  background-color: yellow;
}

.parallax-layer.layer3 {
  top: 20rem;

  width: 30%;
  height: 50rem;

  background-color: blue;
}