Combine css3 transforms via js

问题

please is there a way how to combine more CSS3 transforms over the time? For example when I set this

$bgWrapper.css({
 '-webkit-transform' : ' scale3d(' + currScale + ', '+ currScale +', 1)'
});

And then in few moments this

$bgWrapper.css({
'-webkit-transform' : 'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

I get a problem. First transform is overriden with the second one, but thats what I definitely don't want to happen. So I observed I can combine these values,so I can temporarily store the old one and the do this

var tmpTransform = $bgWrapper.css('-webkit-transform');
$bgWrapper.css({
'-webkit-transform' : ''+ tmpTransform +'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

But even thats not correct, there are problems with repeating calls..

So is there a way how to obtain exact value of css3 scale vie javascript? Is there a way how to get exact value of CSS3 translate via js? Currently I am only getting matrix with these values, off course I can parse it, but I hope there is better solution.

And finally..I suppose that -webkit-transform: matrix(...) is not hardware accelerared on iPad, so only way is matrix3d? to correctly combine all these transformation without problems..

Thanks a lot, hope you understand my questions:)

回答1:

You need to manipulate the matrix in order do accomplish what you want to do:

   var transform = new  WebKitCSSMatrix(window.getComputedStyle(element).webkitTransform);
   transform = transform.rotateAxisAngle(0,0,0,45)
   element.style.webkitTransform = transform;

The methods for manipulating WebkitCSSMatrix are:

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

And you can view a demo here:

http://jsfiddle.net/6jGaA/

回答2:

I am new to web design but am no novice Googler.

To combine transformations, you have to put all the transformations on the same line of code.

This article explains it: http://www.htmlgoodies.com/beyond/css/css3-features-every-web-designer-is-excited-about-skewed-rotated-and-scaled-text.html.

The passage I am talking about is near the bottom.

Combining the Transformations

CSS transforms by themselves are useful, but their real power is unveiled when you combine them together and get remarkable results. Whenever you are combining them, remember that you have to define all the transforms in one line. Here is the sample syntax:

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

来源：https://stackoverflow.com/questions/7777489/combine-css3-transforms-via-js