How to calculate the coordinates for translate(x, y) relative to the viewport's coordinate system and not the object's coordinate system?

Question

css

How to calculate the coordinates for translate(x, y) relative to the viewport's coordinate system and not the object's coordinate system?
This comment perfectly describes the problem:

The most interesting and non-obvious feature of transformations was not reflected: the fact that the transformation changes exactly the coordinate system of the object. For example, if an object is rotated 90° clockwise, despawned in half, and then tried to move 100px to the right, it will actually move 200px down, because in his coordinate system, the X-axis now looks down (and the Y-axis to the left) and each "pixel" in it is equal to two real ones.

Addition #1:
https://yadi.sk/d/9I5hJGWChXSZU
There are two elements on the gif: the first one with a rotation angle of 0deg, the second one is rotated by 30deg. You need to move the element using mouse or touch events. It would seem something simpler, read the coordinates from the events and move the object in accordance with them, but, as it turned out, using transform: translate (x, y) the position of the element is set relative to its coordinate system, and not to the viewport.

Answer 1

https://jsfiddle.net/xo5rwgzq/26/

Answer 2

I still don’t understand what you specifically need, but the right solution would be to decompose the matrix and change the individual transformation matrices for subsequent multiplication and get the final matrix.
I made a primitive example with matrix2d - we drag the transformed objects.

Answer 3

Add variables with viewport coordinates and use as you need.