12

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 度回転させないこのコードのどこが間違っているのでしょうか?

デモを表示すると、より理解が深まります。この動作のデモについては、ペンを参照してください

4

2 に答える 2