title: z-index is canceled by setting transform(rotate)
body: <p>Using transform property, z-index is canceled and appeared in the front.
  (When commenting out -webkit-transform, z-index is properly working in below code)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test {
    width: 150px;
    height: 40px;
    margin: 30px;
    line-height: 40px;
    position: relative;
    background: white;
    -webkit-transform: rotate(10deg);
  }
  
  .test:after {
    width: 100px;
    height: 35px;
    content: "";
    position: absolute;
    top: 0;
    right: 2px;
    -webkit-box-shadow: 0 5px 5px #999;
    /* Safari and Chrome */
    -webkit-transform: rotate(3deg);
    /* Safari and Chrome */
    transform: rotate(3deg);
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;transform&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="transformtest.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="test"&gt;z-index is canceled.&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do transform and z-index work together?</p>