Get element -moz-transform: faire pivoter la valeur dans jQuery

J’ai un 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 la valeur de rotation actuelle via jQuery?

J’ai essayé ça

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

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

Voici ma solution en utilisant jQuery.

Cela renvoie une valeur numérique correspondant à la rotation appliquée à tout élément HTML.

 function getRotationDegrees(obj) { var masortingx = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); if(masortingx !== 'none') { var values = masortingx.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...

J’ai trouvé un bug / 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 l’ angle :

 if(angle < 0) angle +=360; 

Que les résultats seront:

 function getRotationDegrees(obj) { var masortingx = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); if(masortingx !== 'none') { var values = masortingx.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; } 

Voici une version plug-in de la fonction Twist. De plus, le conditionnel if (masortingx! == ‘none’) ne fonctionnait pas pour moi. J’ai donc ajouté une vérification de type:

 (function ($) { $.fn.rotationDegrees = function () { var masortingx = this.css("-webkit-transform") || this.css("-moz-transform") || this.css("-ms-transform") || this.css("-o-transform") || this.css("transform"); if(typeof masortingx === 'ssortingng' && masortingx !== 'none') { var values = masortingx.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(); 

La propriété tranform CSS retournera toujours une valeur de masortingce, comme rotation, inclinaison, échelle, etc. est simplement un raccourci pour faciliter les choses, et ne pas avoir à calculer la valeur de la masortingce à chaque fois, cependant la masortingce est calculée par le navigateur et appliquée comme masortingce , et lorsque cela est fait, il ne peut plus renvoyer le degré de rotation par angle sans recalculer la masortingce.

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 de la masortingce. Essayez de vérifier cela pour obtenir le degré de rotation à partir de la valeur de la masortingce.

En outre, si vous écrivez une fonction de rotation en JavaScript pour traduire les degrés de rotation en une masortingce, cela ressemblerait 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 devez vraiment faire, c’est inverser la fonction et vous êtes doré 🙂

Ma solution (en utilisant 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('masortingx\\((.*)\\)')) { 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 

Si vous faites cela comme vous l’avez décrit, ceci est le seul endroit où vous modifiez réellement la transformation de l’object, puisque votre navigateur ne peut pas être composé de 4 types de navigateurs en même temps, certaines des valeurs préfixées que vous avez assignées sont toujours exactement comme vous les avez assignés. Ainsi, par exemple, si vous utilisez webkit, this.css('-o-transform') renverra toujours 'rotate(7.5deg) ‘, il suffit donc de le faire correspondre à /rotate\((.*)deg\)/ .

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

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

Étant donné que je dois constamment utiliser jQuery avec TweenMax et que TweenMax a déjà pris en charge tous les types d’parsing de chaînes de transformation et les problèmes de compatibilité, j’ai écrit un petit plugin jquery (plus de gsap) qui pourrait accéder directement à 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, j’espère que cela vous aidera.

J’ai fait un violon avec ce code de travail pour obtenir rotateX YZ en 3D, ou rotateZ pour une transformation en 2D. Merci à mihn pour le code de base que j’ai peu mis à jour avec jquery 2.2.3. 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 masortingx = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); if (masortingx!==undefined && masortingx !== 'none') { // if masortingx is 2d masortingx TType="2D"; if (masortingx.indexOf('masortingx(') >= 0) { var values = masortingx.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 { // masortingx is masortingx3d TType="3D"; var values = masortingx.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 masortingxVal10 = parseFloat(values[9]); var a = Math.round(Math.asin(-masortingxVal10 / cosB) * 180 / Math.PI); var masortingxVal1 = parseFloat(values[0]); var c = Math.round(Math.acos(masortingxVal1 / 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 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]);