simekadam simekadam - 4 months ago 19
Javascript Question

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:)

Answer

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/