CODEWITHSUNDEEP
css
onlineracoon
onlineracoon

Reputation: 2970

CSS3 Transform Matrix To Full Transform Conversion

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:

The transformed div with matrxi

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

Upvotes: 5

Views: 6378

Answers (2)

thednp
thednp

Reputation: 4479

There are things called decompose matrix, with W3C compliance, I found on gists https://gist.github.com/mbostock/1340727 Hope this helps.

Upvotes: 2

Jude Fisher
Jude Fisher

Reputation: 11294

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/

Upvotes: 6

Related Questions