Ring Menu

CSS3 Ring Menu by EdoM18. This is just a simple unordered list with five links as the list items. The first link is served as the main trigger of the whole rotating action. The other four links are placed around the main link and are positioned according to the main animation. These links are scaled down to 0 and rotated to -180 degrees and when the main link is hovered, these are scaled up to 1 and rotated to 0 degree which makes it look like the links are behind the main link and they appear while rotating and scaling up.

The rotation animation is made possible by using transitions and by using transform-origin so that these links rotate with origin as the center of the main link. It's a pretty neat and cool technique that won't work in IE as it doesn't support transition property yet.