获取div的translate3d值？

Question

假设div已应用于此:

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

我怎么能用jQuery检索这些值？

Answer 1

根据是否设置了z值,该值将存储为a matrix或a matrix3d.假设没有其他变换,对于2D矩阵,X和Y是最后两个值.对于3D矩阵,X,Y,Z,1是最后四位数.

您可以使用正则表达式来获取值:

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 2

如果您将接受的答案的匹配()模式更改为此,则会添加对负数的支持:

$(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 3

我不知道各种边缘情况，但就我而言，它总是 3 个值，如“translate3d(23px, 34px, 40px)”，所以这是我能找到的最干净的方法：

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

结果：

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