3

请问有没有办法随着时间的推移结合更多的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 translate 的确切值？目前我只得到这些值的矩阵，当然我可以解析它，但我希望有更好的解决方案。

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

非常感谢，希望你能理解我的问题：）

4

2 回答 2

7

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

   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/

于 2011-10-15T16:52:56.797 回答
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);
}
于 2012-05-25T17:48:51.443 回答