The following examples demostrate how to align rotated elements to other elements. It
identifies some issues you might encounter along the way and how you can work around them.
Align One Rotated Element to Something not Rotated
In the first series of examples, we start by trying to align one rotated element (red box) to
a non-rotated element (blue box). The goal is to get the red box's top/middle point to
align with the bottom/left corner of the blue box. The first example shows the elements
after their initial rotation, the second shows what happens if you try to align the elements
without translating the height and width to the elements rotated space. The third example
shows that after correcting for the rotated coordinates, the elements can be align properly.
Align One Rotated Element to Something not Rotated (variation)
Repeat the above exercise but with a larger angle to verify it still works.
Align Two Rotated Elements - jQuery Issues
Now, try to align two rotated elements. Again, the first example shows the initial rotation.
The second example shows an attempt to align the red box to the blue box by only translating
the red box's coordinate space. The third example shows the alignment once both boxes
coordinates are translated. However, they do not align properly because jQuery.offset()
(read more about that issue)
returns the bounding box top/left of the blue box which will cause the red box to be offset
to far to the top/left.
Align Two Rotated Elements - Workaround 1
This examples shows how to work around offset() returning the bounding box. Call offset()
before rotating the elements, rotate them, then align them using the rotational adjustments
to translate the height/width values into the correct coordinate spaces.
Align Two Rotated Elements - Workaround 2
This final example shows an alternative to calculating the rotated height/width adjustments
the prior example used. Instead, it uses the CSS3 tranform's translate() function to move
the elements inside their tranformed coordinate space. In this case, you don't have to do
any math - the rendering engine does it for you. Notice how the top/left of both elements
are not moved in this example. Instead, the tranform space is adjusted to move the elements
so they will align correctly inside the DOM space. Also, notice how the elements align differently
to the two reference lines in the prior example and this example.