获取div的translate3d值？ [英] Get translate3d values of a div?

问题描述

假设一个div应用了它：

Say a div has this applied to it:

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

我如何用jQuery检索这些值？

How could I retrieve those values with jQuery?

推荐答案

该值存储为矩阵或 matrix3d ，取决于是否设置了z值。假设没有其他变换，对于2D矩阵，X和Y是最后两个值。对于3D矩阵，X，Y，Z，1是最后四位数。

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

这篇关于获取div的translate3d值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！