Récupère l'élément -moz-transform: rotation dans jQuery

Question

J'ai du 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) ce qui ne me dit pas grand chose. Ce que je cherche à obtenir, c'est 7.5 .

Answer 1

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...

Answer 2

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

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

Answer 3

Voici une version plug-in de la fonction de Twist. De plus, le conditionnel if (matrix! == 'none') ne fonctionnait pas 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();
 

Answer 4

Le CSS transformer propriété renvoie toujours une valeur de matrice, comme la rotation, l'inclinaison, échelle etc. est juste un raccourci pour faire les choses plus faciles, et ne pas avoir à calculer la matrice de la valeur à chaque fois, cependant, la matrice est calculée par le navigateur et appliqué comme une matrice, et quand cela est fait, il ne peut plus revenir la rotation de degré d'angle sans avoir à recalculer la matrice de retour à nouveau.

Pour faire de telles calcualtions plus facile il y a une bibliothèque javascript appelé Sylvestre qui a été créé dans le but de facile matrice de calcul, essayez de regarder pour obtenir le degré de rotation à partir de la matrice de la valeur.

Aussi, si vous écrivez une fonction de rotation en javascript pour traduire degrés de rotation d'une matrice, il serait probablement ressembler à quelque chose comme ceci (il 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 d'inverser ingénieur aérospatial cette fonction et que vous êtes d'or :-)

Answer 5

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