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:
- 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
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-3don a parent container and just rotating that element, since IE11 doesn't properly support
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.
For the HTML markup, each menu item's text and "
attribute value must match- for example the text "Home" should appear
twice, once inside the SPAN element, once inside the "