Having trouble aligning rotated divs? Let's say we rotate .straight by 30deg, and now we want to find the new offset coordinates of its bottom right corner. This way, we can perfectly match up the bottom left corners of .curve with this new coordinate.
To calculate the offset coordinates of the bottom right corner of .straight, the following code is used:
var straight_width = $(".straight").width();
var br_corner_x = straight_width*Math.cos(30*Math.PI/180); //60.62
var br_corner_y = straight_width*Math.sin(30*Math.PI/180); //35
While this method works well, there is a problem when setting the left and top of .curve using these values:
$(".curve").css({"left": br_corner_x, "top": br_corner_y})
The browser rounds the pixels, resulting in left: 61px and leaving a small gap between the two divs. Although it may seem insignificant, for specific purposes, this difference matters.
For a demonstration of this issue, refer to the following fiddle: https://jsfiddle.net/39q5m71u/2/
If rotating a wrapper containing both divs or adjusting the transform-origin coordinates won't work due to handling multiple rotated divs with varying angles, what alternative approach can be taken to align the divs after rotation?