Take the 2-minute tour ×

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

share|improve this question

2 Answers 2

up vote 7 down vote accepted

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:


And you can view a demo here:


share|improve this answer
Is there an alternative that works in other browsers? –  iamjustaprogrammer Jul 30 at 13:52

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


#rotate-skew-scale-translate {
share|improve this answer

Your Answer


