通过JavaScript结合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缩放的精确值？有没有办法通过js获取CSS3 translate的精确值？ 目前我只能得到具有这些值的矩阵，当然我可以解析它，但我希望有更好的解决方案。

最后，我认为在iPad上，-webkit-transform：matrix（...）没有硬件加速，因此唯一的方法是matrix3d？以正确地组合所有这些变换而没有问题。

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

- simekadam

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/

- methodofaction

---

有没有其他浏览器可用的替代方案？ - iamjustaprogrammer

Answer 2

我在网页设计方面是新手，但在使用Google方面却不是菜鸟。

要组合多个变换效果，你需要将它们放在同一行代码中。

这篇文章详细解释了这个问题：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);
}

- talljay35