通過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) '
});

但即便這樣也不正確，重復通話也存在問題。

那么有沒有辦法如何獲得css3規模與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);
}