Как обновить значения transform через js?

Question

[wakenbyWork]

Есть блоки которые анимируются через js, со свойством transform:

<div style="transform: translateY(-100%) translateY(-12%); "></div>

После применения этих стилей необходимо добавить еще translateX, но как это сделать не понимаю, если сделать так, то предыдущие значения стираются:

div.style.transform = 'translateX(20%)';

Это и логично, если пробовать получить уже примененные свойства таким образом:

getComputedStyle(message).transform

Возвращается matrix. И как работать с ним я не нашел.

Мне нужно получить все примененные свойства transform, добавить в него новое, и применить на элемент. Как такое сделать можно?

Comments

[Сергей Сергей]

Предлагаю через стилевые переменные


А вообще, такое составное свойство и записывать надо целиком.

div.style.transform = 'translateY(-100%) translateY(-12%) translateX(20%)';

[wakenbyWork]

Сергей Сергей, Целиком их не запишешь. Они рассчитываются динамически и ставятся через js. Мне после всех манипуляций нужно еще докинуть translateX, чтобы старые трансофрмации не сломались

[Сергей Сергей]

А если через getAttribute('style')?

[wakenbyWork]

Сергей Сергей, Там еще свойства есть, и разбирать эту строку через регулярку не хочется

Answer 1

[Alex_mos]

может так попробовать

Answer 2

[Noder SS]

div.style.transform = 'translateX(20%) translateY(-100%) translateY(-12%)';
так выходит?