CSS positioning alignment when drawing line?
I have made a simple jsbin to draw a line between 2 points. ( no drawing libraries. just js/jq).
I have already have the code which calculates the angle ( I took it from this library).
so it looks like this :
When I drag the right bottom circle ( I added jquery draggable) it all looks good. Why it looks good ?
becuase the code of origin-transform is :
$("#line") .width(...) .css('-webkit-transform', 'rotate(' + angle + 'deg)') .css('-webkit-transform-origin','top left').
So the div's (red line actually) rotation axis is the
top left point.
So where is the problem ?
It starts when I mess with the
left top circle... here - I dont know how to deal with the red line position...
- How can I fix my code in
-webkit-transform-originin order to support both changes ?
You just forgot to set the Left offset for the line:
and everything will work fine:
Your modified example - now with correct start;)
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here