为什么 z-index 会受到 transform 的影响？

Question

所以我有一个图标，当你点击卡片时你可以翻转它。图标是卡片的一个元素 div.

它们在翻转时有相同的动画（见下面的代码）。

在fiddle中，点击左卡有transformY，右卡根本没有transform。出于展示目的，我将动画和过渡的持续时间设置为 2 秒，这样您就可以看到左侧卡片中出了什么问题。 z-index 和右边卡片中的图标完全不同。

我很想听听你们的意见为什么会发生这种情况，我很想听听我应该怎么做才能让它正常工作。谢谢！

/* 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

这是因为规范描述了不同于值 none 的转换应该创建一个新的 stacking context.

在 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.

为什么 z-index 会受到 transform 的影响？

Why is z-index affected by transform?

html

css

transform

z-index