Dynamic Drive CSS Library- 3D rollover menu

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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:

<style>

ul.rollovermenu3d{
	margin:0;
	padding:0;
	overflow: hidden;
}

ul.rollovermenu3d li{
	display:inline;
	list-type:none;
	-webkit-perspective: 1000;
	perspective: 1000;
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	float: left; /* float left to left align menu items with no gap */
}

ul.rollovermenu3d a{
	display: inline-block;
	position: relative;
	color: #000; /* default color */
	background: #ececec; /* default bg color */
	text-decoration: none;
	font: bold 14px Times New Roman; /* font settings. Change font size to affect menu item dimensions as well such as height */
	letter-spacing: 1px; /* font settings */
	height: 2em; /* height of each button. */
	text-align: center;
  margin: 0;
  margin-bottom: 2px;
	/* transform-style: preserve-3d; */ /* Forgo using "preserve-3d", since it's not supported in IE11 */
	-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

ul.rollovermenu3d a > *{ /* all child elements */
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

ul.rollovermenu3d a > span{ /* chidren span inside button */
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	padding: .3em 10px; /* padding of button. .3em value helps vertically center menu item text */
	-webkit-transform: translate3d(0, 0, 1em); /* 1em here should be half of menu item height (default 2em) */
	transform: translate3d(0, 0, 1em); /* 1em here should be half of menu item height (default 2em) */
	top: 0;
}

ul.rollovermenu3d a::before{ /* hidden, relatively positioned element to help set each menu item dimensions */
  content: attr(data-text); /* Duplicate text of span markup */
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  padding: 0.3em 10px; /* padding of button. .3em value helps vertically center menu item text */
  -moz-box-sizing: border-box;
	box-sizing: border-box; 
  visibility: hidden;
}

ul.rollovermenu3d a::after{ /* Generated content to create menu item when it's flipped */
	content: attr(data-text); /* Duplicate text of span markup */
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
  visibility: hidden;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0.3em 10px; /* padding of button. .3em value helps vertically center menu item text */
	position: absolute;
	background: lightblue; /* background color of flipped menu item */
	-webkit-transform: rotateX(-90deg) translate3D(0, -1em, 1em); /* 1em here should be half of menu item height (default 2em) */
	transform: rotateX(-90deg) translate3D(0, -1em, 1em); /* 1em here should be half of menu item height (default 2em) */
	-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

ul.rollovermenu3d a:hover > span{ /* inner span style when mouse hovers over parent A element */
	-webkit-transform: rotateX(90deg) translate3D(0, 1em, 1em); /* 1em here should be half of menu item height (default 2em) */
	transform: rotateX(90deg) translate3D(0, 1em, 1em); /* 1em here should be half of menu item height (default 2em) */
}

ul.rollovermenu3d a:hover::after{ /* inner ::after content style when mouse hovers over parent A element */
	-webkit-transform: rotateX(0deg) translate3D(0, 0, 1em); /* 1em here should be half of menu item height (default 2em) */
	transform: rotateX(0deg) translate3D(0,0,1em); /* 1em here should be half of menu item height (default 2em) */
  visibility: visible;
	-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#master{
	perspective: 1000;
	perspective-origin: 50% 50%;
	position: relative;
}

#front, #left{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 0;
}


#left{
background: green;
transform: rotateX(89deg) translate3D(0,-400px,0);
}

</style>

<!--[if lte IE 9]>
<style type="text/css">

ul.rollovermenu3d a{
	display: inline-block;
}

ul.rollovermenu3d a > span{
	position: relative;
}

ul.rollovermenu3d a::before, ul.rollovermenu3d a::after{
	content: '';
	display: none;
}

</style>   
<![endif]-->

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

The HTML:

<ul class="rollovermenu3d">
<li><a href="#" data-text="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" data-text="DHTML"><span>DHTML</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" data-text="CSS Library"><span>CSS Library</span></a></li>
<li><a href="http://www.javascriptkit.com" data-text="Tools"><span>Tools</span></a></li>
<li><a href="http://www.cssdrive.com" data-text="CSS Gallery"><span>CSS Gallery</span></a></li>
<li><a href="http://www.javascriptkit.com" data-text="JavaScript"><span>JavaScript</span></a></li>
</ul>

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