获取 div 的 translate3d 值?

IT技术 javascript jquery
2021-03-12 13:25:44

假设一个 div 应用了这个:

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

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

6个回答

如果您将接受的答案的 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
2021-05-19 13:25:44

该值存储为 amatrix或 a 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);
}
css('transform')现在可以使用 jQuery 规范化供应商前缀。
2021-04-28 13:25:44
谁能帮我解决这个问题?stackoverflow.com/q/62437585/13399106
2021-05-09 13:25:44
正如特雷弗在回答中提到的,这不适用于负值!!
2021-05-11 13:25:44
这个逻辑 + @trevor-lundeen 的回应就像一个魅力
2021-05-17 13:25:44

我不知道各种边缘情况,但在我的情况下,它总是 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}

这是我使用的正则表达式,它返回 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);
这是一个真正的享受!非常好的约翰!
2021-05-15 13:25:44

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

/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*))\))/