为什么 z-index 会受到变换的影响？ [复制]答案

【问题标题】：Why is z-index affected by transform? [duplicate]为什么 z-index 会受到变换的影响？ [复制]
【发布时间】：2017-01-14 19:31:22
【问题描述】：

所以我有一个图标，当你点击卡片时你可以翻转。图标是卡片 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);
  }
}

【问题讨论】：

你可以在这里清除你的概念..zomigi.com/blog/css3-transitions-and-z-index

标签： html css transform z-index

【解决方案1】：

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

在 MDN 上：

如果属性的值不同于none，则为堆栈上下文将被创建。在这种情况下，对象将充当包含位置块：它包含的固定元素。

【讨论】：