title: CSS perspective on a long, scrollable div
body: <p>I've got a click style that involves <strong>tilting the element via a 3D rotate when clicked on</strong>. Here's what it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/FPnBh.png" alt="Click effect"></p>
  
  <p>And <a href="https://i.imgur.com/Xrr2AEh.gif" rel="nofollow noreferrer">here is a GIF of the effect working properly with a short list</a>!</p>
  
  <p>I have perspective on the parent div set at about 1500px, and the list div is set to inherit perspective. When this scrollable div gets really long, though, you start to see effects like this when clicking elements toward the bottom of the list:</p>
  
  <p><img src="https://i.stack.imgur.com/yVsS7.png" alt="Click effect with a larger div"></p>
  
  <p>I'm assuming this is because the perspective is applied to the entire height of the div, rather than just the visible height. I tried to resolve this by having the perspective of the list div inherit from the parent div (who's height is only the visible area), but this had no effect.</p>
  
  <p>Any ideas on how to solve this?</p>
  
  <p>Thank you!</p>
  
  <p>EDIT: Relevant HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul class="artists"&gt;
          &lt;li&gt;38 Special&lt;/li&gt;
          &lt;li&gt;A Flock Of Seagulls&lt;/li&gt;
          &lt;!-- etc. --&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>div.container {
      position: relative;
      height: calc(100% - 120px);
      overflow: hidden;
      perspective: 1500px;
  }
  
  ul.artists {
      position: absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      /* Animation stuff, list styles, etc */
      perspective: inherit;
      overflow-y: auto;
      overflow-x: hidden;
  }
  </code></pre>
  
  <p>When pressed, a style like this is applied to the list item:</p>
  
  <pre><code>{
      transform: rotate3d(4.05, 6.1635, 0, 15deg);
  }
  </code></pre>
  
  <p><strong>EDIT: Repro here:</strong>
  <a href="http://codepen.io/anon/pen/LqAhK" rel="nofollow noreferrer">http://codepen.io/anon/pen/LqAhK</a></p>
  
  <p>Notice how as you scroll down the list, the perspective is applied as though the viewport is as high as the list itself, rather than the container - resulting in a different effect depending on your position in the list! How can I get perspective to be applied on the list items using the dimensions of the container only?</p>
  
  <p>My best workaround would be to freeze the list and set a static height on the click event, but that has some side effects and is a somewhat hacky solution!</p>