title: CSS z-Index not working when using translate rotate
body: <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>.div {
    position: absolute;
    display: inline-flex;
    background-color: coral;
    top: 20em;
    left: 20em;
    width: 8em;
    border-radius: 5px;
    /* transform-origin: left center;
      transform: rotate(0deg);  */
  }
  
  .div1 {
    z-index: -1;
    position: relative;
    display: flex;
    left: 7em;
    color: rgb(38, 139, 228);
    background-color: aquamarine;
    padding-left: 1.5em;
    padding-right: 1em;
    border-radius: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="div"&gt;
    &lt;div class="div1"&gt;Division1&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The above example works fine as the div element is on top of the div1 element, however when I add the following to <code>.div</code> the stacking index is lost:</p>
  <pre class="lang-css prettyprint-override"><code>transform-origin: left center;
  transform: rotate(90deg);
  </code></pre>