Home » CSS 3 » CSS3 3D Effect menu

CSS3 3D Effect menu

3D 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


<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

Browser support For 3D Effect menu with CSS3

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

Leave a Reply

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

*
*