Question

我不明白为什么我需要一个转换：translateZ（0）让这个动画工作？如果我删除z-index：-1，它只会向右滑动，但没有文字。如果我添加内容：“向右滑动”文本将随滑动一起显示，但不会产生相同的效果。它几乎就像变换：translateZ（0）充当图层蒙版？

div {
  display: inline-block;
  position: relative;
  margin: 0.4em;
  padding: 1em;
  cursor: pointer;
  background: #e1e1e1;
  color: white;
  transform: translateZ(0);
}
div:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease-out;
}
div:hover:before {
  transform: scaleX(1);
}

<div>Sweep to the right</div>

Answer 1

我明白了！如果我错了，请纠正我！

负面的z指数背后的秘密！除非绝对定位div上的z-index为-1，否则它不起作用。

即使绿色图层的z-index为1，z-index为-1的紫色图层也会覆盖绿色。所以堆叠顺序看起来像这样

Purple (z-index: -1)

Green (z-index: 1)

那有点奇怪吗？ -1不大于1，为什么会发生这种情况？好吧，如果您将绿色图层更改为z-index为0，则堆叠顺序如下所示

Green (z-index: 1)

Purple (z-index: 0)

这更有意义！那么为什么z-index：-1与z-index重叠：0？为什么z-index：1中的文本仍显示？

以下是解释：绿色层中的所有内容都有一个z-index：1，但是负z-index将与任何背景重叠，因为负z-index是第二个最低的索引！ “背景”的z指数最低！这是一张用于说明z-index顺序的照片

希望这能解决所有问题！

Answer 2

angular 1的{{1}}值会建立堆叠背景。

preserve-3d

Source

tranform：translateZ（0）动画解释

2 个答案: