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.

3D Effect menu

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


<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.
3D Menu with CSS3 Demo

Browser support For 3D Effect menu with CSS3

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

One thought on “CSS3 3D Effect menu

Leave a Reply

Your email address will not be published. Required fields are marked *