我决定使用：
* {
-webkit-transform: translate3d(0px, 0px, 0px);
}
当我看到它使我的动画更加平滑时，可能是因为它会强制硬件加速。但我还需要进行一些z-index调整，以便在文本前面放置一个形状，在动画的某个位置mask显示该文本。问题是：我的（灰色）形状必须与另一个形状（下例中的绿色形状）同步移动，该形状位于文本后面。
我构建了一个简单的example，使其更具视觉效果。它在Firefox上运行良好，但我无法在Chrome和Safari上运行。好吧，如果我删除translate3d的东西，它可以工作，但由于我的实际项目需要大量的滑动和平滑的动画，如果我这样做，用户体验会受到影响。
答案 0 :(得分：4)
如果没有translate3D，可以将对等DOM节点（您的文本）放在另一个对等体（您的处理程序）和它的一个子节点（您的掩码）之间，但这只是因为您的文本和处理程序都没有明确的z索引。在这种情况下，首先渲染所有非z索引块，然后最后渲染掩码 - 最后显示在顶部（即使它是子元素）。这有意义吗？好吧，这就是浏览器的工作方式。
但是，当你将translate3d添加到“*”时，你为每个元素添加了一个“堆叠上下文”，所以没有translate3d的“碰巧工作”现在却没有。顺便提一下，adding an explicit z-index to each element in your example - 也会“毁掉”你的面具。同样，你不能将对等DOM节点放在另一个对等体和它的一个子节点之间，因为只要相对于叔叔/阿姨节点的定位，子节点就会继承父节点的z-index。
我的建议是取消你的东西，这样你想在z轴上相对于彼此定位的一切都是一个DOM同伴。这需要手动计算每个元素的绝对定位，并且失去了溢出削波的好处，但是hey, it works。您也可以通过使用正负z值进行3D变换来复制它 - 但同样只能在对等元素中进行复制。
（将z-index标记为！important，只需撤消级联并将元素置于级联堆叠顺序之上。这是一个黑客攻击。）
答案 1 :(得分：0)
知道了！我们可以使用CSS clip属性来屏蔽文本并根据其他对象的位置更新rect值。这里有一些信息w3schools.com/cssref/pr_pos_clip.asp。此链接也非常有见地http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties。
最后这是我的项目，完成http://iuqo.com。拖动背景时，您会看到文本（垂直且漂亮地）剪切。正如我想要的那样。