CSS3 Transform Matrix To Full Transform Conversion

Question

I have a div of 100px width and 100px height with the following matrix:

transform: matrix(1, 0.5, 1, -0.45, 0, 0);

Which gives me this:

How can I convert the transform matrix CSS rule into a full transform CSS rule?

For example:

transform: scale(0.1) rotate(0.5) skew(0.3);

Answer 1

You will need to calculate each portion from the values in the matrix. The best introduction to affine transformations that I've found is this one (even though it's for ActionScript, the math is the same);

http://www.senocular.com/flash/tutorials/transformmatrix/

Or this one, specifically for CSS:

http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/