Get -moz-transform element: rotate value in jQuery

Question

I have a CSS style for the layer:

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

Is there a way to get the current rotation value through jQuery?

I tried this

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

The result of matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px) that doesn't tell me much. I want to get 7.5 .

Answer 1

Here is my solution using jQuery.

This returns a numerical value corresponding to the rotation applied to any HTML element.

 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

I found an error / function in Twist code: the function returns negative angles.

So, I add a simple line of code before returning angle :

 if(angle < 0) angle +=360; 

How will the results be obtained:

 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

Here is the plugin version of the Twist function. Also, the conditional if (matrix! == 'none') did not work for me. So I added type checking:

 (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 the following:

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

Answer 4

The CSS tranform property always returns the value of the matrix, since rotation, skew, scale, etc. It is simply a shorthand to facilitate the work and does not require calculating the matrix value every time, however, the matrix is ​​calculated by the browser and applied as a matrix, and when this is done, it will no longer be able to return the rotated degree by an angle without recounting the matrix back.

To make such calculations easier, there is a javascript library called Sylvester , which was created with the goal of simply computing the matrix, try looking at what to get the degree of rotation from the matrix value.

Also, if you want to write a rotation function in javascript to translate degrees of rotation into a matrix, it will probably look something like this (it uses a sylvester for the last calculation):

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

Now all you really need to do is reverse modify this function and you are golden :-)

Answer 5

My solution (using 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; }; 

Using

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

Answer 6

This script is very useful https://github.com/zachstronaut/jquery-css-transform

Answer 7

If you do this as you described, this is the only place where you actually change the transformation of the object, then, since your browser cannot be one of the four types of browsers at the same time, some of the prefix values ​​you assign are still exactly the same as you they were appointed. For example, if you use webkit, then this.css('-o-transform') will still return 'rotate(7.5deg) ', so this is just a matter of matching it with /rotate\((.*)deg\)/ .

This worked for me: I always assign 5 CSS styles and read all five styles, hoping that at least one of them remains untouched. I'm not sure if this works if the styles are set in CSS (not in JS).

Answer 8

You can also replace var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); on var angle = Math.round(Math.acos(a) * (180/Math.PI));

Answer 9

Since I constantly need to use jQuery along with TweenMax, and since TweenMax has already taken care of all the parsing of various types of conversion strings, as well as compatibility issues, I wrote a tiny jquery plugin here (more gsap wrap) that can directly access these values ​​as follows way:

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

List of properties that you could get / set along with your initial properties:

 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 

Paste from my other answer, hope this helps.

Answer 10

I made a fiddle with this working code to get rotateX YZ on 3D or rotateZ for 2D conversion. Thanks mihn for the base code, which I have updated little with jQuery 2.2.3. I am currently using this solution for my own projects.

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