If I have an imanginary circle with a given radius, I want to align a group of elements around that circle so each element is positioned outside the circle but touching a point on the circle. There are two alignment options I'm interested around a this circle:

1. Attaching a fixed point on an element to the circle. This requires the element to be rotated to maintain this relative position around the circle. This implies that the browser can support CSS3 transforms.
2. Keeping a moving point attached to te circle. This method doesn't require a CSS3 transform to rotate the elements but still maintains the imaginary circle.

The two examples below illustrate this process for each option described above, respectively. In these examples, I'm using my PathJS library to estimate the paths each element should follow to calculate the point to align the element relative to. By using this approach, I can easily move or animate the elements to any point along the calculated path. The animation could be smoother if I created a dedicated animation step function. However, I just called the existing function I setup to align the elements. That's probably not optimal.

In the first example, we need to find a point on the circle and then align the element relative to its top/left DOM position to that point. Additionally, the element's bottom/middle point should appear to be aligned to the circle. To acheive this effect, we can use a CSS transform to both rotate the element and then translate it so the middle/bottom point is at tranform axis' origin which will be the same as the top/left DOM corner. Below, the reference circle is drawn and the top/left corners are plotted in green. You can turn off the reference points and transforms to see how each component affects the alignment.

Aligning an element to a circle without using a fixed point is a bit tricky. The top/left corner needs to be positioned relative to a point on the circle such that some point on the element appears to be properly touching the circle. You could acheive this with some fun math or you can split the circle into four arcs and insert sides that are the same height/width of the element. This creates a rectangle with rounded corners aligned to the circle in a way that you can use it as a guild to align the elements.