9

I have the following code which sets the rotational angle on the element:

$('#1-link-2')
                .css('height', length)
                .css('-webkit-transform', 'rotate(' + angle + 'deg)')
                .css('-moz-transform', 'rotate(' + angle + 'deg)')
                .css('-o-transform', 'rotate(' + angle + 'deg)')
                .css('-ms-transform', 'rotate(' + angle + 'deg)')
                .css('transform', 'rotate(' + angle + 'deg)');

where angle is dynamically calculated previously (its based on the position of the mouse).

I need to be able to retrieve the angle. I tried this for starters:

var angle= $("#1-link-2").css('-webkit-transform');
    $('#node-title').html(angle);   //just to print it to the screen for me

and it gave me this text

matrix(0.5425908601788315, -0.839997118120292, 0.839997118120292, 0.5425908601788315, 0, 0)

How can I retrieve the angle in degrees?

Huangism
  • 16,278
  • 7
  • 48
  • 74
user1015214
  • 2,733
  • 10
  • 36
  • 66
  • 3
    Have you read this link: http://css-tricks.com/get-value-of-css-rotation-through-javascript/ not tested – A. Wolff Nov 27 '12 at 20:24
  • IF you use the updated version of jQuery you dont need all that **-browser-specific** names. just: `transform` and only once :) – Roko C. Buljan Nov 27 '12 at 20:26
  • @roasted, thanks, that looks like it should do the trick! I'll try to implement it now. – user1015214 Nov 27 '12 at 20:34
  • @roxon, do you mean to use transform inside of animate, such as this http://stackoverflow.com/questions/5610171/transform-in-jquery, or is there something else you're refering to? – user1015214 Nov 27 '12 at 20:48
  • @user1015214 - jQuery now in many cases normalizes vendor prefixes, so just `$('#elemID').css({transform: 'rotate(' + angle + 'deg)'});` would do it? – adeneo Nov 27 '12 at 20:50
  • Do you need to use the syntax you're useing ie: css({css code..}) or can I use the way I used it css('transform', 'rotate...'); – user1015214 Nov 27 '12 at 20:53
  • And, in which version did transform begin to take care of all vendor prefixes? – user1015214 Nov 27 '12 at 20:55
  • 2
    By the way, calculating the matrix back to degrees is'nt that hard, here's how I would do it [**FIDDLE**](http://jsfiddle.net/7VXKp/). Not sure how and when the tranform property was normalized, but do a search and you'll probably find out? – adeneo Nov 27 '12 at 20:56
  • @user1015214 Yes, just for example. jQuery will make it work crossbrowser. – Roko C. Buljan Nov 27 '12 at 20:57

3 Answers3

1

The first value is the cosine of the rotation angle, and the second is the sine of the rotation angle - as long as you don't have any more transforms accumulated on that element. Use your favorite math library to calculate inverse sines and cosines.

The inverse cosine of .54 is 54ish or 306 degrees. The inverse sine of -0.83 is 234ish or 306 degrees.

Hey, the right answer must be 306 degrees.

If you've forgotten your geometry, here is a refresher.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
0

See this post:

var el = document.getElementById("thing");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
         st.getPropertyValue("-moz-transform") ||
         st.getPropertyValue("-ms-transform") ||
         st.getPropertyValue("-o-transform") ||
         st.getPropertyValue("transform") ||
         "FAIL";

// With rotate(30deg)...
// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
console.log('Matrix: ' + tr);

// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix

var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];

var scale = Math.sqrt(a*a + b*b);

console.log('Scale: ' + scale);

// arc sin, convert from radians to degrees, round
var sin = b/scale;
// next line works for 30deg but not 130deg (returns 50);
// var angle = Math.round(Math.asin(sin) * (180/Math.PI));
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

console.log('Rotate: ' + angle + 'deg');
CristiC
  • 22,068
  • 12
  • 57
  • 89
-1
function getRotationDegrees(obj) {
  var matrix = obj.css("-webkit-transform") ||
  obj.css("-moz-transform")    ||
  obj.css("-ms-transform")     ||
  obj.css("-o-transform")      ||
  obj.css("transform");
  if(matrix !== 'none') {
    var values = matrix.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
  } else { var angle = 0; }
  return (angle < 0) ? angle +=360 : angle;
}

angle1 = getRotationDegrees($('#1-link-2'));
Sagar
  • 65
  • 9
  • downvoted for (1) only code no discussion in code with pipelined operations(matrix.split('(')[1].split(')')[0].split(',') is not obvious). (2) misuse of the term "matrix" as "collection of transformations", which is close but still going to cause confusion. (3) doing hardcoded non native math in javascript in a function where performance matters since it likely gets called many times per second on an interval. (4) Using jquery initially(requiring input as jquery object) rather than when it is required(if you can get your matrix without jquery, you should try to, before resorting to jquery). – Dmytro Aug 04 '16 at 19:36
  • -1 This code has been copied from: http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery When doing this, put a link to the author. – Red May 09 '17 at 14:10