Как получить значение transform: translate3d jQuery?

Question

[YukioShin]

Как определить текущее значение transform: translate3d? Для того, чтоб можно было от текущего значения изменять его(прибавляя какое-то значение определенное для каких-то элементов). На странице много элементов и определенные элементы должны менять свое местоположение относительно своего текущего положения...

Answer 1

[Александр Корегин]

ricostacruz.com/jquery.transit, посмотри вот эту штуку. Тут и анимации уже готовые и работа с transform

Comments

[YukioShin]

Спасибо! Но, к сожалению, это вряд ли мне поможет

Answer 2

[artuh_a]

function getTransformValues(element) {
    const style = window.getComputedStyle(element);
    const matrix =
      style.transform || style.webkitTransform || style.mozTransform;
    const matrixType = matrix.includes("3d") ? "3d" : "2d";
    const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(", ");

    // 2d matrices have 6 values
    if (matrixType === "2d") {
      return {
        x: Number(matrixValues[4]),
        y: Number(matrixValues[5])
      };
    }

    // 3d matrices have 16 values
    if (matrixType === "3d") {
      return {
        x: Number(matrixValues[12]),
        y: Number(matrixValues[13]),
        z: Number(matrixValues[14]),
      };
    }
  }
}

getTransformValues(твойЭлемент); // { x: 0, y: 0, z: 0 }

Comments

[YukioShin]

Можете немного пояснить ваш код?

x: Number(matrixValues[12]),
        y: Number(matrixValues[13]),
        z: Number(matrixValues[14]),

что такое [12], [13], [14]?

[YukioShin]

Например, у меня элемент в позиции transform: translate3d(0px, 0px, 0px);
как к первому 0px я могу прибавить 92px? Как получить это значение в виде переменной?

[artuh_a]

YukioShin, значения transform возвращаются в виде 2d или 3d матрицы. [12], [13], [14] номера значений в этой матрице, они соответствуют значениям x, y, z. То есть transform: translate3d([12], [13], [14])

[artuh_a]

Например, у меня элемент в позиции transform: translate3d(0px, 0px, 0px);
как к первому 0px я могу прибавить 92px? Как получить это значение в виде переменной?

После вызова функции getTransformValues(); вы получите объект вида { x: 0, y: 0, z: 0 } Вы можете сохранить их в переменные, например, через деструктуризацию - const {x, y, z} = getTransformValues(block);

[artuh_a]

Вот здесь подробнее - https://zellwk.com/blog/css-translate-values-in-ja...