如何在css3中检索角度?
我有以下代码设置元素的旋转角度:
$('#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)
如何以度为单位检索角度?
第一个值是旋转角度的余弦值,第二个值是旋转角度的正弦值 – 只要您在该元素上没有累积任何变换。 使用您喜欢的数学库来计算反正弦和余弦。
.54的反余弦为54度或306度。 -0.83的反正弦为234或306度。
嘿,正确答案必须是306度。
如果您忘记了几何图形,这里有一个复习。
看这篇文章 :
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');
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'));