Question

我有以下代码设置元素的旋转角度：

$('#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)');

其中角度是先前动态计算的（它基于鼠标的位置）。

我需要能够检索角度。我为初学者尝试了这个：

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

它给了我这个文字

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

如何以度为单位检索角度？

Answer 1

第一个值是旋转角度的余弦值，第二个值是旋转角度的正弦值 - 只要您在该元素上没有累积任何变换。使用您喜欢的数学库来计算反正弦和余弦。

.54的反余弦为54度或306度。 -0.83的反正弦为234或306度。

嘿，正确答案必须是306度。

如果您忘记了几何图形，请is a refresher.

Answer 2

请参阅此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');

Answer 3

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

如何在css3中检索角度？

3 个答案: