Why is z-index affected by transform?

Question

So i have an icon you can flip when you click on the card. The icon is an element of the card div.

They have the same animation when they are flipping (see code below).

In the fiddle the left card has a transformY when you click it, the right card has no transform at all. For showcase purposes I set the duration of the animation and transition to 2s so you can see what goes wrong in the left card. The z-index is totally different when you compare it to the icon in the right card.

I'd love to hear from you guys WHY this is happening, and I'd love to hear what I'm supposed to do to make it work correctly. Thanks!

/* FRONTFLIP */

@-webkit-keyframes frontFlip {
  0% {
    z-index: -1;
    -webkit-transform: translate(-50%, -25%) rotateX(-180deg);
    transform: translate(-50%, -25%) rotateX(-180deg);
  }
  50% {
    -webkit-transform: translate(-50%, -75%) rotateX(-270deg);
    transform: translate(-50%, -75%) rotateX(-270deg);
  }
  100% {
    z-index: 1;
    -webkit-transform: translate(-50%, -50%) rotateX(-360deg);
    transform: translate(-50%, -50%) rotateX(-360deg);
  }
}


/* BACKFLIP */

@-webkit-keyframes backFlip {
  0% {
    z-index: 1;
    -webkit-transform: translate(-50%, -50%) rotateX(-360deg);
    transform: translate(-50%, -50%) rotateX(-360deg);
  }
  50% {
    z-index: -1;
    -webkit-transform: translate(-50%, -75%) rotateX(-270deg);
    transform: translate(-50%, -75%) rotateX(-270deg);
  }
  100% {
    z-index: -1;
    -webkit-transform: translate(-50%, -25%) rotateX(-180deg);
    transform: translate(-50%, -25%) rotateX(-180deg);
  }
}

Answer 1

This is because the specification describes that a transform different than the value none should create a new stacking context.

On MDN:

If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.