Get translate3d values of a div?

Question

Say a div has this applied to it:

-webkit-transform: translate3d(0px, -200px, 0px)

How could I retrieve those values with jQuery?

Answer 1

如果您将接受的答案的 match() 模式更改为此，它会增加对负数的支持：

$(el).css('-webkit-transform').match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/)

Answer 2

The value gets stored either as a matrix or a matrix3d , depending on whether or not the z value was set. Assuming no other transformations, for a 2D matrix, X and Y are the last two values. For a 3D matrix, X, Y, Z, 1 are the last four digits.

You could use a regular expression to get the values:

function getTransform(el) {
    var results = $(el).css('-webkit-transform').match(/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/)

    if(!results) return [0, 0, 0];
    if(results[1] == '3d') return results.slice(2,5);

    results.push(0);
    return results.slice(5, 8);
}

Answer 3

I don't know about the various edge cases, but in my case it's always 3 values like 'translate3d(23px, 34px, 40px)', so this was the cleanest way I could find:

function getMatrix(element) {
    const values = element.style.transform.split(/\w+\(|\);?/);
    const transform = values[1].split(/,\s?/g).map(parseInt);

    return {
      x: transform[0],
      y: transform[1],
      z: transform[2]
    };
}

Result:

{x: 238, y: 0, z: 0}

Answer 4

Here is a regular expression I use that returns named groups for x, y, and z. I find it a bit easier on the eyes and to work with:

const re = /translate3d\((?<x>.*?)px, (?<y>.*?)px, (?<z>.*?)px/

You can use it like this:

const transform = element.style.transform;
const re = /translate3d\((?<x>.*?)px, (?<y>.*?)px, (?<z>.*?)px/
const results = re.exec(transform);
console.log(results.groups.x, results.groups.y, results.groups.z);

Answer 5

如果您将正则表达式更新为以下内容，它会在您的转换具有浮点数时添加对这些奇怪情况的支持：

/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/

Answer 6

I can't add comment to @parliament answer so I'll write here.

Be careful with map(parseInt) because ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] source .

Better to use .map(numStr => parseInt(numStr))

function getMatrix(element) {
    const values = element.style.transform.split(/\w+\(|\);?/);
    const transform = values[1].split(/,\s?/g).map(numStr => parseInt(numStr));

    return {
      x: transform[0],
      y: transform[1],
      z: transform[2]
    };
}

Answer 7

EDIT: This is wrong, ignore this.

I think if you do something like...

var styles = $('.myclass').css('-webkit-transform');

You would probably get the translate3d(0px, -200px, 0px) back.

Maybe you could then parse that string? seems like a bit of a hack though.