$.css('transform') return wrong value rotate

Question

Possible Duplicate:
Get element -moz-transform:rotate value in jQuery

Firefox 15 - Chrome:

$('#img2').css('transform');

return =>  "rotate(90deg)"

Firefox 16

$('#img2').css('transform');
return => matrix(0, 1, -1, 0, 0, 0);

Any idea how to get rotate value in firefox 16 What is matrix ?

In Firebq i get:

element.style {
    height: auto;
    transform: rotate(90deg);
    width: auto;
}

Firefox 15 returns the same thing as Firefox 16 here... And both seem to return the used transform value, whereas Chrome is returning the computed one. The spec on which one is right is still up in the air. — Boris Zbarsky, Oct 16 '12 at 03:53

Jude Fisher · Answer 1 · 2012-10-15T14:18:39.053

6

A matrix is an affine transformation in the form [a,b,c,d,tx,ty]. If you parse the css string into an object with those properties (respectively [0,1,-1,0,0,0] in your example), then you can calculate the angle of rotation in degrees by doing: Math.atan2(matrix.b,matrix.a) * (180 / Math.PI);

There's a good article on the css matrix here http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/ - but still the best explanation I've found is this one by Senocular (even though it's meant to be about Flash, the basic math is the same): http://www.senocular.com/flash/tutorials/transformmatrix/

The rotate(deg) syntax is just a shorthand for the underlying matrix transform. I'm not sure why FF accepts one format, but reports another.

More on transforms: http://www.w3.org/TR/2012/WD-css3-transforms-20120911/

edited Oct 15 '12 at 14:18

answered Oct 15 '12 at 14:12

Jude Fisher

11,138
7
48
91

source: http://css-tricks.com/get-value-of-css-rotation-through-javascript/ – user956584 Oct 15 '12 at 14:18
1

@Userpassword That wasn't my source, but it's another useful link. – Jude Fisher Oct 15 '12 at 14:19
ok i try make jqueyr function that work with chrome and firefox15/16 – user956584 Oct 15 '12 at 14:21
OK is duplicate: http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery – user956584 Oct 15 '12 at 14:24
1

Oh yes. Probably best to delete then. – Jude Fisher Oct 15 '12 at 14:26
But google search right now are shity, i try find solution for about 10 minutes and nothing show maybe this will be helpfully to somebody. – user956584 Oct 15 '12 at 14:50
1

Ok - your question, so of course your prerogative. – Jude Fisher Oct 15 '12 at 14:55

$.css('transform') return wrong value rotate

1 Answers1

Linked