Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: CSS3 demos: Here

3D rollover menu

Author: Dynamic Drive

This horizontal menu flips the traditional rollover effect over its head to create a rather unique effect. As the user mouses over a menu item, it rolls up in a 3D fashion like a cube to reveal the bottom side, which is a duplicate of the original menu item's content.

The menu employs a few CSS2 and CSS3 techniques in its making. Specifically:

  • It uses CSS2 generated content to create the "bottom" side of each menu item dynamically, as a duplicate of the corresponding menu item's content, via attribute content: content: attr(data-text)
  • CSS3 transform is used to rotate and position into place in 3D space the original menu item and the generated bottom side, so they form a L shape, with the former side facing the screen (like a chair with its backside facing the screen). This is done via a combination of rotateX() and translate3D(). translate3D() lets you move an element along the x, y, and mostly importantly, z axis respectively. The last operation controls how far an element appears from the screen, creating the sense of depth.
  • When the mouse rolls over the menu item, both sides of the menu item are rotated 90deg along the X asis so the bottom side is now facing the screen to complete the rollover effect.
  • The menu forgoes using transition-style: preserve-3d on a parent container and just rotating that element, since IE11 doesn't properly support transition-style: preserve-3d.

Compatibility wise the rollover effect works in IE10+ and all modern versions of Firefox and Chrome. It degrades well in IE9 and below, showing no rollover effect.

The CSS:

Refer to the comments inside the CSS when modifying the CSS code.

The HTML:

For the HTML markup, each menu item's text and "data-text" attribute value must match- for example the text "Home" should appear twice, once inside the SPAN element, once inside the "data-text" attribute.

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive