javascript - How to retrieve the angle in css3 rotate? - Stack Overflow

admin管理员组

文章数量:1334704

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?

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?

• javascript
• jquery
• css

Share Improve this question Follow edited Jul 17, 2014 at 12:31 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Nov 27, 2012 at 20:21 user1015214user1015214 3,0911111 gold badges4040 silver badges7171 bronze badges 9

• 3 Have you read this link: css-tricks./get-value-of-css-rotation-through-javascript not tested – A. Wolff Commented Nov 27, 2012 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 Commented Nov 27, 2012 at 20:26
• @roasted, thanks, that looks like it should do the trick! I'll try to implement it now. – user1015214 Commented Nov 27, 2012 at 20:34
• @roxon, do you mean to use transform inside of animate, such as this stackoverflow./questions/5610171/transform-in-jquery, or is there something else you're refering to? – user1015214 Commented Nov 27, 2012 at 20:48
• 2 By the way, calculating the matrix back to degrees is'nt that hard, here's how I would do it FIDDLE. Not sure how and when the tranform property was normalized, but do a search and you'll probably find out? – adeneo Commented Nov 27, 2012 at 20:56

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 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.

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

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

本文标签： javascriptHow to retrieve the angle in css3 rotateStack Overflow