Question

假设div已应用于此：

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

我怎样才能用jQuery检索这些值？

Answer 1

该值以matrix或matrix3d存储，具体取决于是否设置了z值。假设没有其他变换，对于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

这是我使用的正则表达式，它返回 x、y 和 z 的命名组。我发现它的眼睛和工作更容易：

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

你可以这样使用它：

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 4

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

/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 5

我不知道各种边缘情况，但就我而言，它总是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}

Answer 6

我无法在@parliament答案中添加评论，所以我将在这里写下。

请谨慎使用map(parseInt)，因为['1', '7', '11'].map(parseInt) returns [1, NaN, 3] source。

更好地使用.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

编辑：这是错误的，请忽略这一点。

我想如果你做的话......

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

你可能会回到translate3d(0px, -200px, 0px)。

也许你可以解析那个字符串？虽然看起来有点像黑客。

获取div的translate3d值？

7 个答案: