Step 1 Introduction

Today lets make a cool CSS 3 menu bar which can make your website look awesome and distinct from other websites out there. So, without wasting much time lets get started !

Using these 3 basic properties you can create create a menu which you can see below:

  1. transform
  2. transition
  3. transform-style

 

Step 2 Create Basic HTML

In the first step first of all lets create a simple basic html

  • <body>
  • <div>
  • <ul> <li><a href="#">Home</a></li> ... </ul>
  • </div>
  • </body>

Step 3 Giving one ‘span’ tag in to ‘li’ tag

  • For the animation, give one span tag in to li tag.
  • Now in that span class add two span tags one fore front side animation and one fore back side animation.
  • Give the class in all tag.
  • <body>
  • <div class="menu">
  • <ul class="menu-list"><li><a href="#" class="hyper-link">Home
  • <span class="box-animation">
  • <span class="front">Home</span>
  • <span class="back">Home</span>
  • </span>
  • </a></li> ... </ul>
  • </div>
  • </body>

Step 4 Apply Simple CSS

Now lets apply simple CSS for that menu.

  • .menu-list { display:block; background:#eee;}
  • .menu-list li { display:inline-block; }
  • .menu-list li a {color:#eee; display: block; text-decoration: none; font-size:16px; padding:15px; font-family:Josefin Sans,sans-serif;}

Step 5 Apply CSS to all 4 Classes

Lets apply CSS to all the 4 classes we have created.

  1. hyper-link
  2. box-animation
  3. front
  4. back
  • .hyper-link{ transition: all .07s linear; position: relative;}
  • .box-animation {transition: all .3s ease-out; position: absolute; }
  • .front{ position: absolute; }
  • .back{ position: absolute; }

Step 6 Apply Animation on Mouse Hover

Now lets apply animation which comes on mouse hover.

  • .hyper-link:hover .box-animation{transform: translateZ(-5px) rotateX(90deg);}

Step 7 Apply Transform Property on classes

Now lets apply transform property on the following three classes:

  1. box-animation
  2. front
  3. back
  • .box-animation{ transition: all .3s ease-out; position: absolute; transform:translatez(-25px); transform-style:preserve-3d; }
  • .front{ transform: rotatex(0deg) translatez(35px); position: absolute; }
  • .back{ transform: rotatex(-90deg) translatez(25px); position: absolute; }

Step 8 Apply other basic CSS

  • .box-animation{transition:all .3s ease-out; position:absolute; transform:translatez(-25px); transform-style:preserve-3d; top:0; left:0; display:block; width:100%; height:100%;}
  • .front{transform:rotatex(0deg) translatez(35px); position:absolute; display:block; width:100%; height:100%; top:0; left:0; background:#07a0e7; padding:15px; color:white; box-sizing: border-box;}
  • .back{transform:rotatex(-90deg) translatez(25px); position:absolute; display:block; width:100%; height:100%; top:0; left:0; background:#a9c468; padding:15px; color:white; box-sizing: border-box;}
  • You can use this pretty interesting animation in any menu bar you create for your website.

– You can also make changes in the animation and make your custom animations.

  • Change these three properties to create various cool effects for your menu bar
  1. angle
  2. axis
  3. animation style(preserve-3d and flat)

Note

You have to add following two properties to make this menu bar compatible to all the browsers:

  1. -ms (for Internet Explorer)
  2. -o (for Opera)
  3. -moz (for Mozilla)
  4. -webkit (for Chrome and Safari)

I hope you found this blog helpful while creating CSS 3 Menu Rotation. Let me know if you have any questions or concerns regarding CSS 3 or HTML 5,

Leave a Reply