Rotation breaks resizable and movable div

user_19894987 0
Viewed 45

I am working on movable, draggable and resizable div which can be rotated. The question is: How to make rotated div properly resize on mousemove? It works fine on bottom and right resize dots but top and left are making div moving while resizing ( while rotated ) ... No idea how to solve this... Couldn't find proper answer for my problem...

If anyone knows how to solve this please share your thoughts!

Here is a link to the sourcecode in svelte REPL. https://svelte.dev/repl/563d81a82f58b73be3468bf19053406?version=3.49.0

svelte rotation geometry css javascript
2 Answers

I suspect this is all because of how transforms work in CSS. The calculations are done from a "point of origin", which is considered the 0 point in the calculations. For example the point 'around' which you rotate.

You can find a better explanation here https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Although it says there that the default is 'center', this is often not true (no idea why). If you change your code to use transform-origin: center it will behave a lot more predictable.

user_119561070

for me it works perfectly fine not sure what is wrong but if I drag the shape from the middle, it starts moving at that point so maybe that might be the area to fix, make it so that the middle part of the shape is not accessible.

user_198899360
Related