Obtenir element-moz-transform:valeur de rotation en jQuery

j'ai trouvé un bug/features dans le code de la Twist: la fonction return négative angles.

J'ai donc ajouté une ligne de code simple avant de retourner le angle:

if(angle < 0) angle +=360;

que les résultats seront:

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

(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));

comme suit:

var rotation = $('img').rotationDegrees();

la propriété CSS tranform retournera toujours une valeur matricielle, comme rotate, skew, scale etc. est tout simplement raccourci pour faire les choses plus facile, et ne pas avoir à calculer la valeur de matrice à chaque fois, mais la matrice est calculée par le navigateur et appliquée comme une matrice, et lorsque cela est fait, il ne peut plus retourner le degré de rotation par angle sans recalculer la matrice à nouveau.

pour faciliter ces calculs, il existe une bibliothèque javascript appelée Sylvester qui a été créé dans le but de faciliter le calcul matriciel, essayez de regarder cela pour obtenir le degré de rotation à partir de la valeur matricielle.

En outre, si vous où écrire une fonction de rotation dans javascript pour traduire des degrés de rotation à une matrice, il serait probablement quelque chose comme ceci (cela utilise sylvester pour le dernier calcul):

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

maintenant, tout ce que vous avez vraiment à faire est d'inverser cette fonction et vous êtes d'or :-)

Ma Solution (à l'aide de 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;
};

Utilisation:

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

Ce script est très utile https://github.com/zachstronaut/jquery-css-transform

Si vous faites cela, comme vous l'avez décrit, tout c'est le seul endroit où vous avez réellement modifier transformation de l'objet, puis depuis votre navigateur ne peut pas être tous les 4 types de navigateurs dans le même temps, certains des préfixé valeurs attribuées sont toujours exactement comme vous l'avez attribuée. Par exemple, si vous utilisez webkit, alors this.css('-o-transform') retournera toujours 'rotate(7.5deg)', il s'agit donc simplement de la comparer à /rotate\((.*)deg\)/.

cela a bien fonctionné pour moi : j'attribue toujours 5 styles css, et lire tous les cinq styles, en espérant qu'au moins l'un d'entre eux sera intact. Je ne suis pas sûr que cela fonctionne si les styles sont définis dans CSS (pas dans JS) cependant.

vous pouvez Également remplacer var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));var angle = Math.round(Math.acos(a) * (180/Math.PI));

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

la liste des propriétés que vous pouvez obtenir/ définir, ainsi que leurs propriétés initiales:

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

Coller de ma réponse, espérons cela aide.

j'ai fait un violon avec ce code de travail pour obtenir rotateX Y Z sur une 3D , ou rotateZ pour une 2D transform. Merci à mihn pour le code de base que j'ai peu mis à jour avec le jquery 2.2.3 actuel. J'utilise actuellement cette solution pour mes propres projets.

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 + "°]");
}else
{
    $("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "°|rotateY=" + mAngle.rotateY + "°|rotateZ=" + mAngle.rotateZ + "°]");
}

Si vous êtes prêt à utiliser en ligne de style pour cette transformation, alors vous pouvez utiliser jQuery pour obtenir le contenu de la balise:

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