I’m trying to get the transform values from my element in js using getComputedStyle and DOMMatrixReadOnly. everything is fine until I add a rotate transform to that element. then every other transform values get messed up. I just want to get the exact same values that I have put in the css file

let’s say I have these styles applied to my element :

.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;
}

then I try getting the transform values in js like this :

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);

and I get these values in the console :

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

ps: I got rotate, scaleX and scaleY formulas from chatGPT and I don’t have any idea what’s going on there. so I would appreciate it if you explain it to me.