CODEWITHSUNDEEP
javascriptjquery
colmtuite
colmtuite

Reputation: 4491

Get CSS transform property with jQuery

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.

Upvotes: 25

Views: 68457

Answers (5)

Pavel Khabusov
Pavel Khabusov

Reputation: 1

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

Upvotes: 0

kamiyam
kamiyam

Reputation: 61

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

Upvotes: 0

Ho&#224;ng Vũ Tgtt
Ho&#224;ng Vũ Tgtt

Reputation: 2032

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

Upvotes: 4

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

Upvotes: 41

James Hibbard
James Hibbard

Reputation: 17735

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

Upvotes: 34

Related Questions