web-dev-qa-db-fra.com

Récupère la valeur de l'élément -moz-transform: rotate dans jQuery

J'ai le style CSS pour un calque:

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

Existe-t-il un moyen d'obtenir une valeur de rotation actuelle via jQuery?

J'ai essayé ça

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

Le résultat est matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px) qui ne me dit pas grand chose. Ce que je cherche à obtenir, c'est 7.5.

jquerycsstransformrotation
46
Goldie

Voici ma solution en utilisant jQuery.

Cela renvoie une valeur numérique correspondant à la rotation appliquée à un élément 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'));

etc...

89
TwystO

J'ai trouvé un bug/des fonctionnalités dans le code de Twist: la fonction return negative angles.

J'ai donc ajouté une simple ligne de code avant de renvoyer la 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;
}
9
andreacanton

Voici une version plug-in de la fonction de Twist. En outre, le conditionnel si (matrice! == 'aucun') n'a pas fonctionné pour moi. J'ai donc ajouté la vérification de type:

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

Utilisez comme suit:

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

Ma solution (avec 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
5
Pigalev Pavel

La propriété de transformation CSS retournera toujours une valeur de matrice, car rotation, inclinaison, échelle, etc. est simplement un raccourci pour simplifier les choses et ne pas avoir à calculer la valeur de matrice à chaque fois, mais la matrice est calculée par le navigateur et appliquée en tant que matrice et lorsque cela est fait, il ne peut plus retourner le degré de rotation par angle sans recalculer la matrice.

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

De plus, si vous devez écrire une fonction de rotation en javascript pour convertir les degrés de rotation en matrice, elle ressemblera probablement à ceci (ceci 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 à faire est de faire appel à un moteur inverseur et vous êtes en or :-)

4
adeneo

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

2
Goldie

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

0
Vadim Kalinin

J'ai fait un violon avec ce code de travail pour obtenir rotateX Y Z sur une 3D, ou rotationZ pour une transformation 2D. Merci à mihn pour le code de base que j’ai peu mis à jour avec la version actuelle 2.2.3 ..__ jquery, 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 + "&deg;]");
}else
{
    $("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "&deg;|rotateY=" + mAngle.rotateY + "&deg;|rotateZ=" + mAngle.rotateZ + "&deg;]");
}
0
Bragon95

Étant donné que je dois constamment utiliser jQuery avec TweenMax et que TweenMax s’occupe déjà de l’analyse de divers types de chaînes de transformation et de problèmes de compatibilité, j’ai écrit un minuscule plug-in jquery here gsap) pouvant directement accéder à ces valeurs comme ceci:

$('#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

Collez de mon autre réponse, espérons que cela aide.

0
Luxiyalu

Si vous faites cela de la manière que vous avez décrite, il s’agit du seul endroit où vous modifiez réellement la transformation de l’objet. Dans la mesure où votre navigateur ne peut pas être composé simultanément de 4 types de navigateurs, certaines des valeurs préfixées que vous avez attribuées sont: toujours exactement comme vous les avez assignés ... Donc, par exemple, si vous utilisez webkit, alors this.css('-o-transform') retournera toujours 'rotate(7.5deg) ', il suffit donc de le faire correspondre à /rotate\((.*)deg\)/.

Cela a bien fonctionné pour moi: j'attribue toujours 5 styles CSS, et relis tous les cinq styles, en espérant qu'au moins un d'entre eux ne sera pas touché. Je ne sais pas si cela fonctionne si les styles sont définis en CSS (pas en JS).

0
qbolec

Si vous souhaitez utiliser le style en ligne uniquement pour cette transformation, vous pouvez utiliser jQuery pour obtenir le contenu de la balise de style:

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