CODEWITHSUNDEEP
jquerycsstransformrotation
Goldie
Goldie

Reputation: 1630

Get element -moz-transform:rotate value in jQuery

I have CSS style for a 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 curent rotation value through jQuery?

I tried this

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

The result is matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px) which doesn't tell me a lot. What I'm looking to get is 7.5.

Upvotes: 52

Views: 53982

Answers (11)

Jake6192
Jake6192

Reputation: 15

If you're willing to use in-line styling for just this transformation, then you can use jQuery to get the contents of the style tag:

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

Upvotes: 0

Bragon95
Bragon95

Reputation: 21

I have make a fiddle with this working code to get rotateX Y Z on a 3D , or rotateZ for a 2D transform. Thanks to mihn for the base code that i have little updated with actual jquery 2.2.3. I currently use 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 + "°]");
}

Upvotes: 2

TwystO
TwystO

Reputation: 2562

Here's 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...

Upvotes: 102

Pigalev Pavel
Pigalev Pavel

Reputation: 1185

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

Usage:

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

Upvotes: 8

Lucia
Lucia

Reputation: 13597

Since I constantly need to use jQuery together with TweenMax and since TweenMax already took care of all the parsing of various types of transformation strings as well as compatibility issues, I wrote a tiny jquery plugin here (more of a wrap up of gsap's) that could directly access these values like this:

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

The list of properties you could get/set, along with their 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.

Upvotes: 0

Vadim Kalinin
Vadim Kalinin

Reputation: 136

Also you could replace var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); to var angle = Math.round(Math.acos(a) * (180/Math.PI));

Upvotes: 0

adeneo
adeneo

Reputation: 318342

The CSS tranform property will always return a matrix value, as rotate, skew, scale etc. is just shorthand for doing things easier, and not having to calculate the matrix value everytime, however the matrix is calculated by the browser and applied as a matrix, and when that is done it can no longer return the rotated degree by angle without recalculating the matrix back again.

To make such calcualtions easier there is a javascript library called Sylvester that was created for the purpose of easy matrix calculation, try looking at that to get the rotation degree from the matrix value.

Also, if you where to write a rotate function in javascript to translate rotational degrees to a matrix, it would probably look something like this (this uses 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 have to do is reverse enginer that function and you're golden :-)

Upvotes: 4

andreacanton
andreacanton

Reputation: 383

I've found a bug/features in the Twist's code: the function return negative angles.

So I've add a simple line of code before returning the angle:

if(angle < 0) angle +=360;

Than the results will be:

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

Upvotes: 11

qbolec
qbolec

Reputation: 5134

If you do this in the way you described, any this is the only place where you actually modify transform of the object, then since your browser can not be all 4 kinds of browsers at the same time, some of the prefixed values you assigned are still exactly as you assigned them. So for example if you use webkit, then this.css('-o-transform') will still return 'rotate(7.5deg)', so it is just a matter of matching it against /rotate\((.*)deg\)/.

This worked fine for me : I always assign 5 css styles, and read back all five styles, hoping that at least one of them will be untouched. I am not sure if this works if the styles are set in CSS (not in JS) though.

Upvotes: 0

Ivo Renkema
Ivo Renkema

Reputation: 2198

Here is a plug-in version of Twist's function. Also, the conditional if(matrix !== 'none') did not work for me. So I have 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 as follows:

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

Upvotes: 6

Goldie
Goldie

Reputation: 1630

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

Upvotes: 2

Related Questions