matrix.translate vs matrix.translate3d webkit ipad

Question

以下代码是Ipad应用程序的webkit过渡的一部分：

#canvas {
        -webkit-transition-property: -webkit-transform;;
        -webkit-transition-duration: 1s;
        -webkit-transition-timing-function: ease-out;
        position:absolute;  
        z-index:1;  
    }

..。

var containerTrsfrm = window.getComputedStyle(currentCanvas).webkitTransform;
    var matrix = new WebKitCSSMatrix(containerTrsfrm);
    matrix = matrix.scale(1.5, 1.5);
    currentCanvas.style.webkitTransform = matrix.translate(100, 100);

但是，如果我将matrix.translate(x,y)更改为matrix.translate3d(x,y,z)，它将停止工作。现在，我想要做这个改变，因为我在几个地方读到这将得到硬件加速的支持，并且在执行上面的代码时发生的闪烁将会消失。

有人能帮上忙吗？

Answer 1

我在webkit transforms / ipad /iOS / webWiew的动画末尾花了几个小时来解决这个闪烁问题。

我发现，在变换过程中，被变换的对象被放在窗口中其他对象的顶部，并且在变换结束时，所有具有较高z索引的对象都会被重新绘制，这会导致闪烁。

因此，只需给转换后的div一个比其他对象更高的z索引，闪烁就会消失。

喷气机

Answer 2

在javascript中，2d和3d使用相同的方法。如果你想做一个3d变换，你只需要使用matrix.translate(x，y，z)。但是，如果您不使用z值，那么以这种方式使用translate就没有意义了。

就像你说的，css translate3d是硬件加速的。但我不太了解matrix和matrix3d的区别。

当应用于样式(currentCanvas.style.webkitTransform) javascript时，根据值选择它应该返回2d还是3d矩阵。要真正强制它，您仍然可以在z轴上添加1像素的平移。