获取 div 的 translate3d 值？答案

【问题标题】：Get translate3d values of a div?获取 div 的 translate3d 值？
【发布时间】：2011-11-02 14:32:49
【问题描述】：

假设一个 div 应用了这个：

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

如何使用 jQuery 检索这些值？

【问题讨论】：

您是否尝试过使用jQuery.css？

标签： javascript jquery

【解决方案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+))\))/)

【讨论】：

这在我的情况下返回 null

【解决方案2】：

值存储为matrix 或matrix3d，具体取决于是否设置了 z 值。假设没有其他变换，对于二维矩阵，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);
}

【讨论】：

你现在可以得到css('transform')，因为 jQuery 规范了供应商前缀。
正如 Trevor 在回答中提到的，这不适用于负值！！
这个逻辑 + @trevor-lundeen 的回应就像一个魅力
谁能帮我解决这个问题？ stackoverflow.com/q/62437585/13399106

【解决方案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}

【讨论】：

【解决方案4】：

这是我使用的一个正则表达式，它返回 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);

【讨论】：

这是一个真正的享受！非常好的约翰！

【解决方案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*))\))/

【讨论】：

【解决方案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]
    };
}

【讨论】：

【解决方案7】：

编辑：这是错误的，忽略这个。

我想如果你做类似...

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

您可能会收到translate3d(0px, -200px, 0px) 的回复。

也许你可以解析那个字符串？不过，这似乎有点像 hack。

【讨论】：

不，你会得到一个这样的矩阵：matrix(-1, -0.00000000000000012246467991473532, 0.00000000000000012246467991473532, -1, 0, 0)
啊对！哎哟！这就是为什么我说认为、可能和也许:)