25

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.

colmtuite
  • 4,311
  • 11
  • 45
  • 67

5 Answers5

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
Pascal Lindelauf
  • 4,782
  • 4
  • 40
  • 55
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • 1
    In what case would `matrix[12]` and `matrix[13]` relevant? – István Pálinkás Mar 17 '17 at 18:14
  • 3
    @StevenPalinkas: that is in case of 3d transformation where matrix of 4*4 size is defined. Check third property in doc here https://www.w3schools.com/cssref/css3_pr_transform.asp – Milind Anantwar Mar 20 '17 at 06:34
  • Does it make sense still to differ between '-moz-transform', '-ms-transform', etc. since all browsers are compatible to 'rotate (nnn deg)' ? – Jonny May 06 '17 at 10:41
  • 1
    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`. – Shikkediel Jan 03 '18 at 07:40
34
$('.foo').click(function() {
    var current_pull = parseInt($('.form-con').css('transform').split(',')[5]);
});
James Hibbard
  • 16,490
  • 14
  • 62
  • 74
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;
}
Community
  • 1
  • 1
Hoàng Vũ Tgtt
  • 1,863
  • 24
  • 8
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);
kamiyam
  • 61
  • 4
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

Pavel Khabusov
  • 1
  • 3