Get CSS transform property with jQuery

Question

I'm trying to get the -webkit-transform: translateY('') property in a variable.

HTML

<form class="form-con" style="-webkit-transform: translateY(-802px);"></form>

JS

$('.foo').click(function() {
    var current_pull = parseInt($('.form-con').css('transform').split(',')[4]);
});

This is returning '0', instead of the correct value.

What browser are you using? In Chrome you have to get the value with .css('-webkit-transform') - your code returns undefined for that function so the split fails. Be wary of cross-browser issues with this — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 24, 2014 at 12:26
You'd have better to retrieve setted value from: $('.form-con')[0].style['webkitTransform'] — A. Wolff
– A. Wolff, Commented Feb 24, 2014 at 12:30

Pascal Lindelauf · Accepted Answer · 2015-04-14 21:18:09Z

41

You can use:

 var obj = $('.form-con');
 var transformMatrix = obj.css("-webkit-transform") ||
   obj.css("-moz-transform")    ||
   obj.css("-ms-transform")     ||
   obj.css("-o-transform")      ||
   obj.css("transform");
 var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');
 var x = matrix[12] || matrix[4];//translate x
 var y = matrix[13] || matrix[5];//translate y

edited Apr 14, 2015 at 21:18

Pascal Lindelauf

4,8904 gold badges43 silver badges58 bronze badges

answered Feb 24, 2014 at 12:24

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

István Pálinkás Over a year ago

In what case would matrix[12] and matrix[13] relevant?

Milind Anantwar Over a year ago

@StevenPalinkas: that is in case of 3d transformation where matrix of 4*4 size is defined. Check third property in doc here w3schools.com/cssref/css3_pr_transform.asp

Jonny Over a year ago

Does it make sense still to differ between '-moz-transform', '-ms-transform', etc. since all browsers are compatible to 'rotate (nnn deg)' ?

Shikkediel Over a year ago

Even though I prefer the regex here over the more usual approach I came across to get the values, I did notice that with a particularly small number it strips the e notation from the value - making it become NaN.

James Hibbard · Accepted Answer · 2014-02-24 12:21:46Z

34

$('.foo').click(function() {
    var current_pull = parseInt($('.form-con').css('transform').split(',')[5]);
});

answered Feb 24, 2014 at 12:21

James Hibbard

17.8k14 gold badges69 silver badges76 bronze badges

1 Comment

Jonny Over a year ago

Gives me always 0 back

Community · Accepted Answer · 2017-05-23 12:02:56Z

4

I think the answer is here:

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

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 30, 2015 at 8:35

Hoàng Vũ Tgtt

2,09226 silver badges12 bronze badges

Comments

kamiyam · Accepted Answer · 2017-03-06 08:49:33Z

0

I think the order of properties is indeterminate.

var matrix = $obj.css('transform');
var translate = {};

// translateX 
var matchX = matrix.match(/translateX\((-?\d+\.?\d*px)\)/);
if(matchX) {
  translate.x = matchX[1];
}

// translateY
var matchY = matrix.match(/translateY\((-?\d+\.?\d*px)\)/);
if(matchY) {
  translate.y = matchY[1];
}

console.log(translate);

edited Mar 6, 2017 at 8:49

answered Mar 5, 2017 at 15:34

kamiyam

614 bronze badges

Comments

Pavel Khabusov · Accepted Answer · 2023-03-21 22:07:10Z

0

You can get the transform string using outerHTML rather than matrix3d because it doesn't recalculate vw when resizing:

let imgEl = $('img');
let defaultMatrix = imgEl.prop('outerHTML');
defaultMatrix = getStringProp(defaultMatrix, 'style="', '"');
console.log(defaultMatrix);
let trZ = getStringProp(defaultMatrix, 'translate3d(', ')');
trZ = trZ.split(', ')[2];
console.log(trZ);

function getStringProp(str, first, last) {
  str = str.substring(str.indexOf(first) + first.length, str.length);
  return str.substring(str.indexOf(last) + last.length - 1, 0);
}

Here is the example

edited Mar 21, 2023 at 22:07

answered Mar 21, 2023 at 19:35

Pavel Khabusov

13 bronze badges

Collectives™ on Stack Overflow

Get CSS transform property with jQuery

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related