Скажем, что div применил это к нему:
-webkit-transform: translate3d(0px, -200px, 0px)
Как я могу получить эти значения с помощью jQuery?
Скажем, что div применил это к нему:
-webkit-transform: translate3d(0px, -200px, 0px)
Как я могу получить эти значения с помощью jQuery?
Значение сохраняется либо как 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);
}
Если вы измените шаблон принятого ответа 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+))\))/)
Если вы обновляете регулярное выражение до следующего, оно добавляет поддержку для тех нечетных случаев, когда ваше преобразование имеет 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*))\))/
EDIT: это неправильно, игнорируйте это.
Я думаю, если вы сделаете что-то вроде...
var styles = $('.myclass').css('-webkit-transform');
Вероятно, вы вернете translate3d(0px, -200px, 0px)
.
Может быть, вы могли бы разобрать эту строку? похоже, немного взломан.
Я не знаю о различных крайних случаях, но в моем случае это всегда 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}