Create a modern flat metro-style menu with flip effect with CSS3 transform property



Thanks to IOS7 and Windows 8′s brand new metro style, flat design is currently a prominent trend.

In this tutorial I will show you how to create a flat menu using the following:

  • HTML5
  • CSS3
  • Font Awesome (for the icons)
  • Google fonts (for the Roboto font, which does really well in flat design)

First I suggest you look at the CSS3 transform property here

This is what we will be creating

The above preview is located on jsfiddle so you can have access to the full code there.

The HTML

The markup for our menu items will be as such:

<nav>
    <ul class="panel">
        <li class="color-1">
            <a href="#">
                <div class="front">
                    <i class="fa fa-home fa-4x"></i>
                </div>
                <div class="back">
                    <span>home</span>
                </div>
            </a>
        </li>
...
    </ul>
</nav>

Let’s go into detail about this markup and the classes.

<li class="color-1">

I have assigned each menu item a class used for assigning different colors to each menu item. I gave the other menu items classes such as color-2, color-3, …

<div class="front">
    <i class="fa fa-home fa-4x"></i>
</div>

The front class is what you will see if you don’t hover your mouse over the menu item. I have chosen to use Font Awesome icons.
In this case it is a home icon. Sizing is determined by adding the class fa-4x. More information on this can be found here.

<div class="back">
    <span>home</span>
</div>

The back class is pretty self-explanatory. It is what you will get to see once you hover your mouse over the menu item.

The juicy stuff!

Now lets get to the CSS and the animations, where it gets a lot more interesting!

Personally I recommend using LESS mixins for the animations if you are familiar with it. Nevertheless I shall use regular ol’ CSS for the purpose of this tutorial.

First of all either include Font Awesome and the Roboto font either in your HTML or directly in your CSS as such:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

For the animation to look better, we first need to set a perspective from which the element is viewed. This can be done with the CSS3 perspective property

nav ul li a {
    width: 100px;
    height: 100px;
    float: left;
    margin: 0 10px;
  -webkit-perspective: 600px;
     -moz-perspective: 600px;
      -ms-perspective: 600px;
          perspective: 600px;
}

For this example I have set it to 600px. This will give us the perfect subtle 3D effect when we flip the element.

Next, we need to initialize the element, set a transition duration, disable the backface visibility and set a transform style on the front class.



nav ul li .front {
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg);
       -o-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

Setting rotateX and rotateY to 0 degrees defines a starting position for our animation. It also defines the position for the animation to end when we move our mouse away from the element.

The next step is to define what happens when we hover our mouse over the menu item. We do this in the following way:

nav ul li:hover .front {
  -webkit-transform: rotateX(0deg) rotateY(180deg);
     -moz-transform: rotateX(0deg) rotateY(180deg);
      -ms-transform: rotateX(0deg) rotateY(180deg);
       -o-transform: rotateX(0deg) rotateY(180deg);
}

By setting RotateY to 180 degrees on the front child class of the  :hover  pseudo-class, we tell the browser to rotate the element by 180 degrees on the (vertical) Y-axis when the list item has a  :hover  pseudo-class on it.

Now for some tricky logic. If the list item has the :hover  pseudo-class applied to it, we should set the rotation of the back class to 0 degrees, and if it does not have the  :hover  pseudo-class applied to it (in other words: when you are not hovering over it) you should rotate it -180 degrees.

nav ul li .back {
  position: absolute;
  top: 0;
  width: inherit;
  height: inherit;
  text-align: center;
  z-index: -1;
  -webkit-transform: rotateX(0deg) rotateY(-180deg);
     -moz-transform: rotateX(0deg) rotateY(-180deg);
      -ms-transform: rotateX(0deg) rotateY(-180deg);
       -o-transform: rotateX(0deg) rotateY(-180deg);
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

nav ul li:hover .back {
  z-index: 1;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg);
       -o-transform: rotateX(0deg) rotateY(0deg);
}

It’s important to note here that I make the back class inherit the width and the height and also set the position to absolute and the top to 0 in order to position the element correctly once it is flipped over. If you don’t do this the menu item will jump down and position itself under where the front element used to be. This is because the backface-visibility property only hides the front element when it is flipped, it is still there, just not visible.

Important note about IE compatibility: Since IE8 and IE9 will not suppor the transform. We instead use z-index as a fallback so that the back element comes on top of the front element when it has the :hover pseudo-class.

That’s it!

You have now learnt how to create a pretty nice flippin’ menu using absolutely no JavaScript, and prettied it up using some nice Font Awesome icons and the Roboto font.

Feel free to leave a comment if you have any questions, or if you would like to share a website where you have used this technique to create your own animated flat design menu!

Share the knowledge!
Share on Facebook23Tweet about this on Twitter303Share on Google+17Share on StumbleUpon1,552Share on Reddit4Share on LinkedIn5Share on TumblrBuffer this pageDigg this

Comments

You may also like...

x
Stay updated