Home » Tutorials

CSS3 3D top shift menu

Tutorials
Author Reading 11 min Views 20 Published by Modified by

In this tutorial I will show you how to create animated 3D navigation menu (with images) with CSS3 only (JavaScript-free ). We will be using the power of CSS3 effects like perspective, box-sizing, transforms, gradients and transitions. You can use this menu in order to make a professional look of your website. Pay attention, than to see this menu you should move and hover your mouse over the blue element at the top of page.

This is our final result:

CSS3 3D top shift menu

Here are samples and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/menu.css
  5. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Step 1. HTML

The first step is to define the HTML markup.

index.html

01 <!DOCTYPE html>
02 <html lang="en">
03     <head>
04         <meta charset="utf-8" />
05         <title>CSS3 3D top shift menu | Script Tutorials</title>
06         <link href="css/layout.css" rel="stylesheet" type="text/css" />
07         <link href="css/menu.css" rel="stylesheet" type="text/css" />
08     </head>
09     <body class="menu_body">
10         <!-- The main menu element -->
11         <div class="menu">
12             <ul>
13                 <li><a href="#"><img src="images/1.png" /></a></li>
14                 <li><a href="#"><img src="images/2.png" /></a></li>
15                 <li><a href="#"><img src="images/3.png" /></a></li>
16                 <li><a href="#"><img src="images/4.png" /></a></li>
17                 <li><a href="#"><img src="images/5.png" /></a></li>
18                 <li><a href="#"><img src="images/6.png" /></a></li>
19                 <li><a href="#"><img src="images/7.png" /></a></li>
20             </ul>
21         </div>
22         <div class="page_content">
23             <div class="shade"></div>
24             <div class="box">
25                 <div class="header">Box header</div>
26                 <div class="body">
27                     Any dummy text
28                 </div>
29                 <div class="footer">Box footer</div>
30             </div>
31             <div class="box">
32                 <div class="header">Box header</div>
33                 <div class="body">
34                     Any dummy text
35                 </div>
36                 <div class="footer">Box footer</div>
37             </div>
38         </div>
39     </body>
40 </html>

In the body of the document we have the menu and page_content element. Main idea is to divide the page into two semantic sections. The main menu consists of UL-LI unordered list elements. Each element has own image.

The page contains of the shade element (which is invisible by default) and rest code (I prepared two design boxes here). Each box contains – the header, the body and the footer.

Step 2. CSS

I want to notice that current menu should work well in most of the modern web browsers (except IE). The best results are in Firefox and Chrome.

Now – let’s start styling the navigation menu! First, we write the rules for document’s BODY element:

css/menu.css

1 .menu_body {
2     /* CSS3 perspective */
3     -webkit-perspective: 1500px;
4     -moz-perspective: 1500px;
5     -ms-perspective: 1500px;
6     -o-perspective: 1500px;
7     perspective: 1500px;
8 }

It adds perspective to our page. Now we have to write the base rules for our menu and even for content section:

01 .menu, .page_content {
02     /* CSS3 box-sizing, transition and transform */
03     -webkit-box-sizing: border-box;
04     -moz-box-sizing: border-box;
05     -ms-box-sizing: border-box;
06     -o-box-sizing: border-box;
07     box-sizing: border-box;
08     -webkit-transition: -webkit-transform 0.5s ease;
09     -moz-transition: -moz-transform 0.5s ease;
10     -ms-transition: -ms-transform 0.5s ease;
11     -o-transition: -o-transform 0.5s ease;
12     transition: transform 0.5s ease;
13 }
14 /* the main menu element (which appears from the top) */
15 .menu {
16     background-color: #002edb;
17     display: block;
18     position: fixed;
19     width: 100%;
20     height: 148px;
21     z-index: 1;
22     /* CSS3 transform */
23     -webkit-transform: rotateX(-45deg) translateY(-95%);
24     -moz-transform: rotateX(-45deg) translateY(-95%);
25     -ms-transform: rotateX(-45deg) translateY(-95%);
26     -o-transform: rotateX(-45deg) translateY(-95%);
27     transform: rotateX(-45deg) translateY(-95%);
28 }
29 /* change background color and rotate the main menu element on hover */
30 .menu:hover {
31     background-color: #4169ff;
32     /* CSS3 transform */
33     -webkit-transform: rotateX(0deg);
34     -moz-transform: rotateX(0deg);
35     -ms-transform: rotateX(0deg);
36     -o-transform: rotateX(0deg);
37     transform: rotateX(0deg);
38 }
39 /* rest page content */
40 .page_content {
41     padding: 20px 0 0;
42 }

Please notice that we use rotateX and translateY properties to show and hide the main menu. Now, we should prepare the rules for our unordered list with images:

01 /* the main menu - UL-LI properties */
02 .menu ul {
03     display: block;
04     margin: 0 auto;
05     overflow: hidden;
06     position: relative;
07     width: 1036px;
08 }
09 .menu ul li {
10     float: left;
11     list-style: none outside none;
12     margin: 10px;
13     /* CSS3 transition */
14     -webkit-transition: all 0.5s ease;
15     -moz-transition: all 0.5s ease;
16     -ms-transition: all 0.5s ease;
17     -o-transition: all 0.5s ease;
18     transition: all 0.5s ease;
19 }
20 .menu ul li:hover {
21     background-color: #7e00d6;
22     /* CSS3 border-radius */
23     -webkit-border-radius: 64px;
24     -moz-border-radius: 64px;
25     -ms-border-radius: 64px;
26     -o-border-radius: 64px;
27     border-radius: 64px;
28 }

We use easy transition for our images – we change color and set the radius for them. When we keep our mouse over the menu – we should make the page a little bit darker (we are going to use the shade element – gradient):

01 /* page's shade element (invisible by default) */
02 .page_content .shade {
03     display: block;
04     height: 100%;
05     left: 0;
06     opacity: 0;
07     position: absolute;
08     top: 0;
09     visibility: hidden;
10     width: 100%;
11     z-index: 1000;
12     /* CSS3 linear-gradient */
13     background: -moz-linear-gradient(top,  rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
14     background: -webkit-gradient(linear, top top, bottom top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65)));
15     background: -webkit-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
16     background: -ms-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
17     background: -o-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
18     background: linear-gradient(to bottom,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
19     /* CSS3 transition */
20     -webkit-transition: all 0.5s ease;
21     -moz-transition: all 0.5s ease;
22     -ms-transition: all 0.5s ease;
23     -o-transition: all 0.5s ease;
24     transition: all 0.5s ease;
25 }

And finally, we should enable our Shade and also we should rotate our page_content element when we hover the menu:

01 /* when we hover on menu - turn page_content down */
02 .menu:hover ~ .page_content {
03     /* CSS3 transform */
04     -webkit-transform: rotateX(-45deg) translateY(80px);
05     -moz-transform: rotateX(-45deg) translateY(80px);
06     -ms-transform: rotateX(-45deg) translateY(80px);
07     -o-transform: rotateX(-45deg) translateY(80px);
08     transform: rotateX(-45deg) translateY(80px);
09 }
10 /* when we hover on menu - display the shade */
11 .menu:hover ~ .page_content .shade {
12     opacity: 1;
13     visibility: visible;
14 }

In the long run our animated 3D CSS3 menu is complete!

Live Demo

Conclusion

Have you liked this tutorial? If so – make sure to share it with your friends and share your thoughts in the comment section below.

Rate article
© 2025 Script Tutorials