javascript – 通过js结合css3转换

请问有没有办法如何结合更多的CSS3变换？
例如,当我设置这个

$bgWrapper.css({
 '-webkit-transform' : ' scale3d(' + currScale + ', '+ currScale +', 1)'
});

然后片刻之后

$bgWrapper.css({
'-webkit-transform' : 'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

我遇到了问题.第一个变换被第二个变换覆盖,但这就是我绝对不希望发生的事情.
所以我观察到我可以组合这些值,所以我可以暂时存储旧值并执行此操作

var tmpTransform = $bgWrapper.css('-webkit-transform');
$bgWrapper.css({
'-webkit-transform' : ''+ tmpTransform +'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

但即便这样也不正确,重复通话也存在问题.

那么有没有办法如何获得css3规模与javascript的精确值？有没有办法如何通过js获得CSS3翻译的确切值？
目前我只获得具有这些值的矩阵,当然我可以解析它,但我希望有更好的解决方案.

最后..我想–webkit-transform：matrix(…)在iPad上不是硬件加速,所以唯一的方法是matrix3d？正确地组合所有这些转换没有问题..

非常感谢,希望你理解我的问题:)

解决方法:

您需要操纵矩阵才能完成您想要做的事情：

   var transform = new  WebKitCSSMatrix(window.getComputedStyle(element).webkitTransform);
   transform = transform.rotateAxisAngle(0,0,0,45)
   element.style.webkitTransform = transform;

manipulating WebkitCSSMatrix的方法是：

.multiply()
.inverse()
.translate()
.scale()
.rotate()
.rotateAxisAngle()
.skewX()
.skewY()

你可以在这里查看演示：

http://jsfiddle.net/6jGaA/

标签：javascript,jquery,css3,css-transforms,ipad
来源： https://codeday.me/bug/20190723/1514827.html