CSS3 3D Effect menu

How we can create 3D effect menu with CSS3? Since the introduction of CSS3, there are really a lot of interesting stuffs and experiments have come up. And they really showed the true possibilities of CSS3.

With the use of CSS3, we can create 3D effects. Here, I give an example for 3D Effect menu with CSS3. Using CSS3 perspective, transition and transform, we can create the 3D effect.

HTML for 3D Effect menu with CSS3

First of all, we will add the necessary HTML for the 3D menu.

<div class="nav-wrapper">
<ul class="ul-nav">
<li>
<a href="#" class="three-d">
Home
<span class="three-d-box">
<span class="front">Home</span>
<span class="back">Home</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
About Us
<span class="three-d-box">
<span class="front">About Us</span>
<span class="back">About Us</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
Services
<span class="three-d-box">
<span class="front">Services</span>
<span class="back">Services</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
News
<span class="three-d-box">
<span class="front">News</span>
<span class="back">News</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
Contact Us
<span class="three-d-box">
<span class="front">Contact Us</span>
<span class="back">Contact Us</span>
</span>
</a>
</li>
</ul>
</div>

CSS for 3D Effect menu with CSS3

.nav-wrapper { width: 55%;}
        .ul-nav {
            display: block;
			overflow: hidden;
			background: #1F83A8;
			padding-left: 5px;
        }

        .ul-nav li { display: inline-block;         }

        .ul-nav li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 20px;
            padding: 15px 10px;
        }

        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

		.three-d:not(.active):hover .three-d-box,
		.three-d:not(.active):focus .three-d-box {
			-moz-transform: translateZ(-25px) rotateX(90deg);
			-webkit-transform: translateZ(-25px) rotateX(90deg);
			-o-transform: translateZ(-25px) rotateX(90deg);
			transform: translateZ(-25px) rotateX(90deg);
		}

        .three-d-box {
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -ms-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            
        }
		.three-d-box, .front, .back {
			position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
		}
		
        .front {
			background: #196087;
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
			background: #079391;
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {           
            padding: 15px 10px;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

Demo

Watch the Demo for 3D Effect Menu.

Browser support For 3D Effect menu with CSS3

3D Effect menu with CSS3 demo will display properly in latest versions of Firefox and Chrome.