web-dev-qa-db-ja.com

jQueryの要素-moz-transform：rotateの値を取得します

レイヤーのCSSスタイルがあります。

_.element {
    -webkit-transform: rotate(7.5deg);    
     -moz-transform: rotate(7.5deg);    
      -ms-transform: rotate(7.5deg);    
       -o-transform: rotate(7.5deg);   
          transform: rotate(7.5deg);
}
_

JQueryを介して現在の回転値を取得する方法はありますか？

私はこれを試しました

_$('.element').css("-moz-transform")
_

結果はmatrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px)であり、あまりわかりません。取得したいのは_7.5_です。

jquerycsstransformrotation
47
Goldie

JQueryを使用した私のソリューションを次に示します。

これは、HTML要素に適用される回転に対応する数値を返します。

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($('#myDiv'));
angle2 = getRotationDegrees($('.mySpan a:last-child'));

等...

90
TwystO

Twistのコードにバグ/機能が見つかりました。関数はnegative angleを返します。

そこで、angleを返す前に簡単なコード行を追加しました。

if(angle < 0) angle +=360;

結果は次のとおりです。

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; }

    if(angle < 0) angle +=360;
    return angle;
}
9
andreacanton

Twistの機能のプラグインバージョンを以下に示します。また、条件付きのif（matrix！== 'none'）は機能しませんでした。そこで、型チェックを追加しました。

(function ($) {
    $.fn.rotationDegrees = function () {
         var matrix = this.css("-webkit-transform") ||
    this.css("-moz-transform")    ||
    this.css("-ms-transform")     ||
    this.css("-o-transform")      ||
    this.css("transform");
    if(typeof matrix === 'string' && 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;
   };
}(jQuery));

次のように使用します。

var rotation = $('img').rotationDegrees();
5
Ivo Renkema

私のソリューション（jQueryを使用）：

$.fn.rotationInfo = function() {
    var el = $(this),
        tr = el.css("-webkit-transform") || el.css("-moz-transform") || el.css("-ms-transform") || el.css("-o-transform") || '',
        info = {rad: 0, deg: 0};
    if (tr = tr.match('matrix\\((.*)\\)')) {
        tr = tr[1].split(',');
        if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
            info.rad = Math.atan2(tr[1], tr[0]);
            info.deg = parseFloat((info.rad * 180 / Math.PI).toFixed(1));
        }
    }
    return info;
};

使用法：

$(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515}
$(element).rotationInfo().deg; // 7.5
5
Pigalev Pavel

CSS tranformプロパティは常にマトリックス値を返します。回転、スキュー、スケールなどは簡単にするための略記で、毎回マトリックス値を計算する必要はありませんが、マトリックスはブラウザーによって計算され、マトリックスとして適用されます、それが完了すると、マトリックスを再度計算し直さなければ、角度ごとに回転した角度を返すことができなくなります。

このような計算を簡単にするために、簡単なマトリックス計算のために作成された Sylvester と呼ばれるjavascriptライブラリがあります。それを見て、マトリックス値から回転角度を取得してみてください。

また、回転角度をマトリックスに変換するjavascriptでrotate関数を記述する場所は、おそらく次のようになります（これは最後の計算にシルベスターを使用します）。

var Transform = {
    rotate: function(deg) {
        var rad = parseFloat(deg) * (Math.PI/180),
            cos_theta = Math.cos(rad),
            sin_theta = Math.sin(rad);

        var a = cos_theta,
            b = sin_theta,
            c = -sin_theta,
            d = cos_theta;

        return $M([
          [a, c, 0],
          [b, d, 0],
          [0, 0, 1]
        ]);
    }
};

今、あなたが本当にしなければならないのは、その機能をリバースエンジニアリングすることであり、あなたは黄金です:-)

4
adeneo

このスクリプトは非常に役立ちます https://github.com/zachstronaut/jquery-css-transform

2
Goldie

また、var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));をvar angle = Math.round(Math.acos(a) * (180/Math.PI));に置き換えることもできます。

0
Vadim Kalinin

この作業コードをいじって、3DでrotateX Y Zを取得し、2D変換でrotateZを取得しました。実際のjquery 2.2.3でほとんど更新していない基本コードのmihnに感謝します。現在、このソリューションを自分のプロジェクトに使用しています。

https://jsfiddle.net/bragon95/49a4h6e9/

    //
//Thanks: Adapted on base code from mihn http://stackoverflow.com/a/20371725
//

function getcsstransform(obj)
{
    var isIE = /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);

  var TType="undefined",
        rotateX = 0,
        rotateY = 0,
      rotateZ = 0;

  var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform") ||
    obj.css("-ms-transform") ||
    obj.css("-o-transform") ||
    obj.css("transform");
  if (matrix!==undefined && matrix !== 'none')
  {
        // if matrix is 2d matrix
    TType="2D";
    if (matrix.indexOf('matrix(') >= 0)
    {
      var values = matrix.split('(')[1].split(')')[0];
      if (isIE)  //case IE
      {
        angle = parseFloat(values.replace('deg', STR_EMPTY));
      }else
      {
        values = values.split(',');
        var a = values[0];
        var b = values[1];
        var rotateZ = Math.round(Math.atan2(b, a) * (180 / Math.PI));
      }
    }else
    {
      // matrix is matrix3d
      TType="3D";
      var values = matrix.split('(')[1].split(')')[0].split(',');
      var sinB = parseFloat(values[8]);
      var b = Math.round(Math.asin(sinB) * 180 / Math.PI);
      var cosB = Math.cos(b * Math.PI / 180);
      var matrixVal10 = parseFloat(values[9]);
      var a = Math.round(Math.asin(-matrixVal10 / cosB) * 180 / Math.PI);
      var matrixVal1 = parseFloat(values[0]);
      var c = Math.round(Math.acos(matrixVal1 / cosB) * 180 / Math.PI);
      rotateX = a;
      rotateY = b;
      rotateZ = c;
    }
  }

    return  { TType: TType, rotateX: rotateX,  rotateY: rotateY,  rotateZ: rotateZ };
};

mAngle = getcsstransform($("#Objet3D"));
if (mAngle.TType=="2D")
{
    $("#Result").html("Transform 2D [rotateZ=" + mAngle.rotateZ + "&deg;]");
}else
{
    $("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "&deg;|rotateY=" + mAngle.rotateY + "&deg;|rotateZ=" + mAngle.rotateZ + "&deg;]");
}
0
Bragon95

私は常にjQueryをTweenMaxと共に使用する必要があり、TweenMaxはさまざまな種類の変換文字列のすべての解析と互換性の問題をすでに処理しているため、小さなjqueryプラグインを作成しました here （more of a次のようにこれらの値に直接アクセスできるgsapのラップ）：

$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x

取得/設定できるプロパティのリストとその初期プロパティ：

perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0

私の他の答えから貼り付け、これが役立つことを願っています。

0
Lucia

あなたが説明した方法でこれを行う場合、これはオブジェクトの変換を実際に変更する唯一の場所です。ブラウザは同時に4種類のブラウザすべてではないため、割り当てたプレフィックス値の一部は割り当てたとおりに正確に。たとえば、webkitを使用する場合、this.css('-o-transform')は引き続き'rotate(7.5deg) 'を返します。したがって、/rotate\((.*)deg\)/と照合するだけです。

これは私にとってはうまくいきました：私は常に5つのCSSスタイルを割り当て、5つのスタイルすべてを読み直し、少なくとも1つのスタイルが触れられないことを望みます。ただし、スタイルが（JSではなく）CSSで設定されている場合、これが機能するかどうかはわかりません。

0
qbolec

この変換だけにインラインスタイリングを使用する場合は、jQueryを使用してスタイルタグのコンテンツを取得できます。

parseInt($(  /*TODO*/  ).attr('style').split('rotate(')[1].split('deg)')[0]);
0
Jake6192