How to mix css3 transform properties without overriding (in realtime)?

Question

Is there any way to combine (mix) css transform properties without overriding? For example there I want to rotate and scale. http://jsfiddle.net/hyzhak/bmyN3/

html<

Answer 1

Instead of rotate and scale you could use the matrix function.

transform: matrix(a, b, c, d, tx, ty);

In the example given, I believe the following would produce the desired result:

transform: matrix(0,-0.25,0.25,0,0,0);

For an explanation of matrix calculations:

• http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices

And some useful tools exist for calculating these matrices as CSS, such as:

• http://www.boogdesign.com/examples/transforms/matrix-calculator.html