Does css transform changes the z-index property?

Question

I found a wired thing when I apply the transform to an element, it changes the z-index order, the code as:

<button class="test">
  click me
</button>

css:

.test{
  border-radius:100px;
  transition:all 1s;
  position:relative;
}

.test:hover{
  transform:translateY(30px);
}

.test::after{
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  background:blue;
  width:100%;
  height:100%;
}

codepen: https://codepen.io/JianNCI/pen/jZQRpz?editors=1100

I was intending to hide the :: after content by setting thez-index order to -1 and I am setting the blue background color for distinguishing them. but once I hovering on the button, the hiding content will overlap the button. so my questions are:

1. Why the z-index:-1not working when I hovering on it? it is supposed to remain as -1 since I only set the transform property within the hover effect.

2. When I replace the transform property like color: red, it is work as I expected. So I am wondering if this the transform makes the z-index:-1 lose effect in this case?