5

我决定使用：

* {
    -webkit-transform: translate3d(0px, 0px, 0px);
}

当我看到它使我的动画更加流畅时，可能是因为它强制硬件加速。但是我还需要进行一些z-index调整，以便在文本前面放置一个形状，mask在动画的某个点到该文本。问题是：我的（灰色）形状必须与文本后面的另一个形状（下例中的绿色）同步移动。

我构建了一个简单的示例以使其更加直观。它在 Firefox 上运行良好，但我无法让它在 Chrome 和 Safari 上运行。好吧，如果我删除 translate3d 的东西，它会起作用，但由于我的实际项目需要大量的滑动和平滑动画，如果我这样做，用户体验会受到影响。

4

2 回答 2

4

如果没有 translate3D，则可以在另一个对等点（您的处理程序）和它的一个子项（您的掩码）之间放置一个对等 DOM 节点（您的文本），但这只是因为您的文本和处理程序都没有明确的 z-indexes。在这种情况下，所有非 z 索引块首先呈现，然后遮罩最后呈现 - 最终在顶部（即使它是子元素）。这有意义吗？好吧，这就是浏览器的工作方式。

但是，当您将 translate3d 添加到“*”时，您为每个元素添加了一个“堆叠上下文”，所以没有 translate3d 的“发生的工作”，现在没有。顺便说一句，为示例中的每个元素添加显式 z-index - 也会“破坏”您的掩码。同样，您不能将对等 DOM 节点定位在另一个对等节点和它的一个子节点之间，因为就相对于叔叔/阿姨节点的定位而言，子节点继承了父节点的 z-index。

我的建议是取消嵌套你的东西，这样你想要在 z 轴上相对于彼此定位的所有东西都是一个 DOM 对等体。这需要手动计算每个元素的绝对定位，并且您失去了溢出剪裁的好处，但是，嘿，它有效。您也可以通过使用正负 z 值进行 3D 变换来复制它 - 但同样，仅在对等元素之间。

（将 z-index 标记为 !important，只是撤消级联并将元素放在级联堆叠顺序的顶部。这是一个 hack。）

于 2012-09-11T01:44:07.127 回答
0

知道了！我们可以使用 CSS clip 属性来屏蔽文本并根据其他对象的位置更新 rect 值。这是w3schools.com/cssref/pr_pos_clip.asp的一些信息。这个链接也很有见地http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties。

最后这是我的项目，完成http://iuqo.com。当您拖动背景时，您会看到文本被（垂直且很好地）剪切。正是我想要的。

于 2013-01-16T23:28:24.003 回答