Obter elemento -moz-transform: gire o valor em jQuery

Eu tenho estilo CSS para uma camada:

.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 uma maneira de obter o valor de rotação curent através do jQuery?

Eu tentei isso

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

O resultado é matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px) que não me diz muito. O que eu estou procurando é 7.5 .

   

Aqui está a minha solução usando jQuery.

Isso retorna um valor numérico correspondente à rotação aplicada a qualquer elemento 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 ...

Eu encontrei um bug / resources no código do Twist: a function retorna ângulos negativos .

Então, adicionei uma linha simples de código antes de retornar o angle :

 if(angle < 0) angle +=360; 

Do que os resultados serão:

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

Aqui está uma versão do plug-in da function do Twist. Além disso, o if condicional (matriz! == ‘none’) não funcionou para mim. Então eu adicionei a verificação de tipos:

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

Use da seguinte maneira:

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

A propriedade tranform CSS sempre retornará um valor de matriz, como rotate, skew, scale etc. é apenas uma forma abreviada para facilitar as coisas, e não ter que calcular o valor da matriz toda vez, porém a matriz é calculada pelo navegador e aplicada como uma matriz e quando isso é feito, ele não pode mais retornar o grau rotacionado por ângulo sem recalcular a matriz novamente.

Para tornar tais cálculos mais fáceis, existe uma biblioteca javascript chamada Sylvester que foi criada com o propósito de facilitar o cálculo da matriz, tente ver isso para obter o grau de rotação do valor da matriz.

Além disso, se você escrever uma function de rotação em javascript para traduzir graus rotacionais para uma matriz, provavelmente será algo como isto (isso usa sylvester para o último cálculo):

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

Agora tudo o que você realmente tem que fazer é reverter essa function e você é dourado 🙂

Minha solução (usando 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; }; 

Uso :

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

Se você fizer isso da maneira que descreveu, qualquer um desses é o único lugar onde você realmente modifica a transformação do object, então, como seu navegador não pode ser todos os 4 tipos de navegadores ao mesmo tempo, alguns dos valores prefixados atribuídos são ainda exatamente como você os designou. Então, por exemplo, se você usar o webkit, então this.css('-o-transform') ainda retornará 'rotate(7.5deg) ‘, então é só uma questão de /rotate\((.*)deg\)/ lo com /rotate\((.*)deg\)/ 'rotate(7.5deg) /rotate\((.*)deg\)/ .

Isso funcionou bem para mim: eu sempre atribuo 5 estilos css, e leio de volta todos os cinco estilos, esperando que pelo menos um deles não seja tocado. Não tenho certeza se isso funciona se os estilos forem definidos em CSS (não em JS).

Você também pode replace var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); para var angle = Math.round(Math.acos(a) * (180/Math.PI));

Como eu constantemente preciso usar o jQuery juntamente com o TweenMax e como o TweenMax já cuidou de todos os tipos de strings de transformação e problemas de compatibilidade, eu escrevi um minúsculo plugin de jquery aqui (mais um resumo do gsap) que poderia acessar diretamente esses valores como este:

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

A lista de propriedades que você pode obter / definir, juntamente com suas propriedades iniciais:

 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 

Cole da minha outra resposta, espero que isso ajude.

Fiz um violino com esse código de trabalho para obter o rotateX YZ em um 3D ou o rotateZ para um 2D. Graças a mihn para o código de base que eu tenho pouco atualizado com jquery real 2.2.3. Atualmente, uso essa solução para meus próprios projetos.

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

Se você estiver disposto a usar o estilo in-line apenas para essa transformação, use o jQuery para obter o conteúdo da tag de estilo:

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