Cách lấy giá trị xoay chuyển đổi CSS theo độ với JavaScript

Question

Tôi đang sử dụng mã found at CSS-Tricks để lấy biến đổi xoay hiện tại (trong CSS) bằng JavaScript.

hàm JavaScript:

function getCurrentRotation(elid) { 
    var el = document.getElementById(elid); 
    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..."; 

    if(tr !== "none") { 
    console.log('Matrix: ' + tr); 

    var values = tr.split('(')[1]; 
     values = values.split(')')[0]; 
     values = values.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); 

    // arc sin, convert from radians to degrees, round 
    /**/
    var sin = b/scale; 
    var angle = Math.round(Math.asin(sin) * (180/Math.PI)); 
    /*/ 
    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); 
    /**/ 

    } else { 
    var angle = 0; 
    } 

    // works! 
    console.log('Rotate: ' + angle + 'deg'); 
    $('#results').append('<p>Rotate: ' + angle + 'deg</p>'); 
} 

Theo bài viết, công trình này, tuy nhiên, đối với giá trị hơn 180 độ, tôi nhận được số âm, và 360deg trả về zero. Tôi cần có khả năng trả lại giá trị độ chính xác từ 180-360 độ.

Tôi đang làm gì sai với mã này sẽ không cho phép trả lại mức độ chính xác hơn 180 độ?

Sẽ có ý nghĩa hơn nếu bạn xem bản trình diễn: See the pen for a demo of this in action.

Answer 1

Tìm câu trả lời trong câu hỏi SO khác, bạn phải thêm (2 * PI) nếu kết quả bằng radian nhỏ hơn 0.

dòng này:

var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); 

nhu cầu phải được thay thế với điều này:

var radians = Math.atan2(b, a); 
if (radians < 0) { 
    radians += (2 * Math.PI); 
} 
var angle = Math.round(radians * (180/Math.PI));