- Rendering the elements, red rectangle and a small blue square.
- Using event listener to capture user click and move the square.
Now let’s rotate the red rectangle/container and see what happens!
Note: we’re setting the transformation origin to left, top to make further calculation simpler, and we’re moving/translating Y to move the container to the original position (#1).
We expected it to work out of the box right? let’s see what’s happening.
It turns out that the click event doesn’t get transformed with its container as we may have expected, so basically we’ll have to handle the transformation manually, using the following 2d rotation matrix (clockwise direction) we can get rotate the user’s click coordination to the same clockwise 90°:
Finally the study case is only for 90°, but the same logic can be applied to get other notable angles working.