Chrome上的z-index vs translate3D

Question

我决定用:

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

当我看到它使我的动画更加平滑时,可能是因为它强制硬件加速.但我还需要进行一些z-index调整,以便在mask动画的某个位置将文本放置在文本前面.问题是:我的(灰色)形状必须与另一个形状(下面示例中的绿色形状)同步移动,该形状位于文本后面.

我构建了一个简单的例子,使其更具视觉效果.它适用于Firefox,但我无法让它在Chrome和Safari上运行.好吧,如果我删除translate3d的东西,它可以工作,但由于我的实际项目需要大量的滑动和平滑的动画,如果我这样做,用户体验将受到影响.

Answer 1

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

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