Ajax Loader
×

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.

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Rotating Menu

    CSSDeck G+