simekadam simekadam - 5 months ago 32
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

'-webkit-transform' : ' scale3d(' + currScale + ', '+ currScale +', 1)'

And then in few moments this

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


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) = transform;

The methods for manipulating WebkitCSSMatrix are:


And you can view a demo here: