I'm trying to make a backgammon game with Javascript and CSS and tried to make all elements size with PX and get moving distance of pieces by this way:
let start = FromElement.getBoundingClientRect().x; //imagine start = 50
let end = ToElement.getBoundingClientRect().x; //imagine end = 60
piece.style.transform = "translateX(" + (end - start) + ")"; //60 - 50 = 10
Please don't attend to vertical movement
Now when I transform my root element (Board Element) to fit the board to the page, I see that addition to scaling the start and end ( for example with 1.5x scaling, start: 75 & end: 90), the distance will change during to start and end changing (become 90 - 75 : 15) and change another time by scaling (15 * 1.5: 22.5) so I saw a bad translation.
every size is by PX but I can't understand where is problem!?!?!? :(
I think this will good to say that I understand that by saw distance will decrease when I set page width smaller than the main size!!!
This is a part of understanding what is my problem! ( I undo my move after first move)
