javascript - 通过 js 组合 css3 转换

Question

请问有什么方法可以随着时间的推移组合更多的 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) '
});

但即使那是不正确的，重复调用也有问题..

那么有没有办法通过javascript获取css3 scale的精确值呢？有没有办法通过js获取CSS3翻译的准确值？ 目前我只能得到这些值的矩阵，当然我可以解析它，但我希望有更好的解决方案。

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

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

Answer 1

你需要操纵矩阵才能完成你想做的事情:

   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/