title: What does the scaleZ() CSS transform function do?
body: <p>I’m trying to wrap my tiny brain around 3D CSS transforms, and I‘m having trouble understanding what the <code>scaleZ()</code> function is for.</p>
  
  <p><code>scale()</code>, <code>scaleX()</code> and <code>scaleY()</code> make sense: they stretch the element along the axis specified, multiplying its dimension along that axis by the number you provide.</p>
  
  <p>But <code>scaleZ()</code> seems different:</p>
  
  <ol>
  <li>It applies to children of the element</li>
  <li>It doesn’t affect the dimensions of the child elements, as HTML elements don’t have any dimension along the z-axis (i.e. you can’t make a <code>&lt;div&gt;</code> “thicker”).</li>
  </ol>
  
  <p><a href="http://www.webkit.org/blog/386/3d-transforms/" rel="noreferrer">The WebKit blog says</a>:</p>
  
  <blockquote>
    <p>[<code>scaleZ()</code>] affects the scaling along the z axis in transformed children.</p>
  </blockquote>
  
  <p>I can’t figure out what this actually means in practice. Could anyone supply an explanation, preferably with some example code?</p>