CSS-Tricksにあるコードを使用して、JavaScript で現在の回転変換 (CSS) を取得しています。
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>');
}
投稿によると、これは機能しますが、180 度を超える値の場合、負の数が得られ、360 度はゼロを返します。180 ~ 360 度の角度値を正しく返せるようにする必要があります。
正しい角度を 180 度回転させないこのコードのどこが間違っているのでしょうか?
デモを表示すると、より理解が深まります。この動作のデモについては、ペンを参照してください。