Question

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

他们在翻转时有相同的动画（请参阅下面的代码）。

在fiddle中，当您点击它时左侧卡片有一个transformY，右侧卡片根本没有变换。为了展示目的，我设置了动画的持续时间并转换为2s，这样你就可以看到左侧卡片出了什么问题。将z-index与右卡中的图标进行比较时，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：

如果属性的值不是none，则为堆叠上下文将被创建。在这种情况下，对象将充当包含 block for position：它包含的固定元素。

为什么z-index受变换的影响？

1 个答案: