CSS3 Rotating Menu
Here is a cool CSS3 menu which is a modified version of the original menu from CSS3Create. The menu is created using two parts, first is the "share" and second is the list of social links which is rotated to 180 degrees. The rotated part is hidden using a mask on top of the menu which is of the same color
as the background
.
The menu is animated using animation
and keyframes
properties. When the mouse is hovered on the "share" link, the menu rotates to 180 degrees and reveals the list of social links while the "share" link gets hidden under the mask. Then there is another animation when the mouse leaves the menu which turns it back to 360 degrees or 0 degrees so that it completes the whole rotation. This is very cool technique but it will only work in Webkit based browsers and Mozilla Firefox.