CSS z-Index not working when using translate rotate

Question

.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;
}

<div class="div">
  <div class="div1">Division1</div>
</div>

The above example works fine as the div element is on top of the div1 element, however when I add the following to .div the stacking index is lost:

transform-origin: left center;
transform: rotate(90deg);