Получите значения translate3d div?

Ответ 1

Значение сохраняется либо как matrix, либо matrix3d, в зависимости от того, установлено ли значение z. Предполагая никаких других преобразований, для двумерной матрицы X и Y являются последними двумя значениями. Для трехмерной матрицы 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);
}

Ответ 2

Если вы измените шаблон принятого ответа 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+))\))/)

Ответ 3

Если вы обновляете регулярное выражение до следующего, оно добавляет поддержку для тех нечетных случаев, когда ваше преобразование имеет float:

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

Ответ 4

EDIT: это неправильно, игнорируйте это.

Я думаю, если вы сделаете что-то вроде...

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

Вероятно, вы вернете translate3d(0px, -200px, 0px).

Может быть, вы могли бы разобрать эту строку? похоже, немного взломан.

Ответ 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}