title: CSS parallax - how to set height and scroll range
body: <p>I've been playing around with <a href="http://keithclark.co.uk/articles/pure-css-parallax-websites/" rel="nofollow">Keith Clark's CSS parallax</a> and it's pretty awesome.</p>
  
  <p>What I can't figure out is, how is the total height of the scrollable area being controlled, the placement of the parallax layers, or the range of how far they can be scrolled.</p>
  
  <p>For example, view this example:  <a href="https://jsfiddle.net/evemzodb/" rel="nofollow">https://jsfiddle.net/evemzodb/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="parallax"&gt;
    &lt;div class="parallax__layer parallax__layer--back c1"&gt;
      back c1
    &lt;/div&gt;
    &lt;div class="parallax__layer parallax__layer--base c2"&gt;
      base c2
    &lt;/div&gt;
     &lt;div class="parallax__layer parallax__layer--deep c3"&gt;
      deep c3
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .parallax__layer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100vh;
  }
  .parallax__layer--base {
    transform: translateZ(0);
  }
  .parallax__layer--back {
    transform: translateZ(-1px) scale(2);
  }
  .parallax__layer--deep {
    transform: translateZ(-2px) scale(3);
  }
  
  .c1 {
      background-color: red;
  }
  .c2 {
      background-color: blue;
  }
  .c3 {
      background-color: yellow;
  }
  </code></pre>
  
  <p>The total height of the scrollable area appears to be 200vh.  How is this being determined?  Is this a result of the scale and translateZ attributes?  Similarly, what is causing the spacing between the .base and .back div?</p>