Применение поворота к элементу изменяет все остальные значения преобразования в getComputedStyle и матрице. ⇐ CSS

[Anonymous]

Я пытаюсь получить значения преобразования из моего элемента в js, используя getComputedStyle и DOMMatrixReadOnly. все в порядке, пока я не добавлю к этому элементу преобразование вращения. тогда все остальные значения преобразования перепутаются. Я просто хочу получить те же значения, которые я вставил в файл CSS
скажем, к моему элементу применены эти стили:

Код: Выделить всё

.swiper-product-slide > .arrow-bg-wrap .arrow-bg {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
transform: rotate(10deg) translateX(5px) translateY(10px);
opacity: 0.3;
}

затем я пытаюсь получить значения преобразования в js следующим образом:

Код: Выделить всё

let transformMatrix = new DOMMatrixReadOnly(getComputedStyle(el))
let translateX = matrix.m41
let translateY = matrix.m42
let rotate = Math.atan2(transformMatrix.b, transformMatrix.a) * (180 / Math.PI)
let scaleX = Math.sqrt(transformMatrix.a * transformMatrix.a + transformMatrix.c * transformMatrix.c)
let scaleY = Math.sqrt(transformMatrix.b * transformMatrix.b + transformMatrix.d * transformMatrix.d);

и я получаю эти значения в консоли:

Код: Выделить всё

translateX:  3.18756
translateY:  10.7163
rotate:  9.999987517730311
scaleX: 1.0000002123839773
scaleY: 1.0000002123839773

ps: я получил формулы поворота, масштабированияX и масштабированияY из ChatGPT и понятия не имею, что там происходит. поэтому я был бы признателен, если бы вы мне это объяснили.

Подробнее здесь: https://stackoverflow.com/questions/787 ... getcompute