通过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规模的精确值vie javascript？ 有没有办法如何通过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; 

操作WebkitCSSMatrix的方法是：

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

您可以在此处查看演示：

http://jsfiddle.net/6jGaA/

Answer 2

我是网页设计的新手但不是新手Googler。

要组合转换，您必须将所有转换放在同一行代码上。

本文解释了它： http ： //www.htmlgoodies.com/beyond/css/css3-features-every-web-designer-is-excited-about-skewed-rotated-and-scaled-text.html 。

我正在谈论的这段话接近底部。

结合转换

CSS转换本身很有用，但是当你将它们组合在一起并获得显着的结果时，它们的真正力量就会被揭开。 无论何时组合它们，请记住必须在一行中定义所有变换。 以下是示例语法：

 #rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }