December 3, 2014 | 86 Feedbacks

3D Rotating Navigation

A 3D rotating navigation, powered by CSS transformations.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability standards. Another good example is mobile apps: animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.

Inspiration for this nugget came from Taasky, a to-do iOS app with a great side navigation – that you can see in action on dribbble.

The icons included have been created by the talented Vlad Cristea and can be downloaded for free on GraphicBurger.

Creating the structure

We created a <header> element to wrap the logo and the trigger for the rotating navigation (.cd-3d-nav-trigger) and a <main> element to wrap the main content. We used an unordered list for the navigation, semantically wrapped into a <nav> element. A span.cd-marker has been appended to the <nav> to create the marker for the selected item in the navigation.

Adding Style

To realise our animation, we used CSS3 Transformations applied to the <header>, <main> and <navigation> elements.
Here is a quick preview to show you the animation process (.gif created in After Effects).


By default, the navigation (.cd-3d-nav-container) is hidden right above the viewport (translateY(-100%) and visibility(hidden)), while the unordered list (.cd-3d-nav) is rotated (rotateX(90deg) and transform-origin: bottom center). When user clicks the trigger element, the class .nav-is-visible is added to the <main>, <header> and <nav> elements which are translated of a quantity equal to the navigation height while the .cd-3d-nav is rotated back (rotateX(0)). CSS3 Transitions have been used to achieve a smooth animation.

The .cd-marker element has been used to create the marker for the selected navigation item (the <span> is the bottom line, while its ::before pseudo-element is the triangle). In order to change the marker color, we defined the .color-n classes (one for each navigation item). These classes change the color property of the .cd-marker. Since we set background-color : currentColor, changing the color updates the background-color too. Beside, we set border-bottom-color: inherit for the .cd-marker::before element, which is also updated changing its parent color property.

Update: due to a bug on Chrome, we had to use the .color-n class to change the background-color (rather than using the currentColor value).

Events Handling

We used jQuery to add/remove the .nav-is-visible class when user clicks the navigation trigger.
Besides, when user selects one of the navigation list item, the left position of the span.cd-marker is changed so that it is aligned with the selected element, and the proper .color-n class is added (to change its background color).


Nov 12, 2015
  • Bug fixed on Chrome 46.0.86 - 'background: currentColor' not getting repainted when 'color' is changed
June 17, 2015
  • Bug fixed - update marker position after window resize
Dec 3, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • http://themeforest.net/user/IG_design/portfolio?ref=IG_design IG Design

    Awesome! Thanks! :)

  • luisrudge


  • Thibault Maekelbergh

    Thanks, will use

  • http://dubovik.org Sergey Dubovik


  • Karim Boubouh

    awesome thanks :)

  • jwebcat

    Y no use transform3d for gpu?

    • http://codyhouse.co Claudia Romano

      We have been using the translateZ(0) trick ;)

      • Guest


  • Bjorn Boonen

    Wouldn’t it be possible to discard jQuery and use checkboxes for this?

    The hamburger icon can be a label which triggers a checkbox.

    And if you use code like this:

    .css-trigger–enable-menu + .cd-3d-nav-container {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.5s 0s, visibility 0.5s 0s;

    It would have the same effect I think.

    • http://codyhouse.co Claudia Romano

      Sure, pure CSS can be used to “detect” a click event.

  • freule

    you need a IE8 fallback!!!

    • Samir Habib Zahmani

      IE8 is a pain in the neck, personally if I had to create a fallback for each such feature I’ve ever created, I’d have shot myself.

      Display a div for IE8 users telling them to get a better browser (preferably NOT IE), you’ll do them a favor.

  • http://firchow.net/ ShockeR_de

    Really nice. I think it will be more flexible to behave the nav itself (ul) like a table to get ridd of the width’s.
    Like in this example: http://jsfiddle.net/csswizardry/zfSt4/

    • http://www.sfpcoder.com/ sina

      very nice idea
      what about browsers support?

  • http://www.dikaio.com/ Don Dikaio

    I’ve seen loads of tutorials, snippets, etc on the net but I don’t think anyone has produced a collection that is as clean as what you guys are doing, some serious work here guys! Looking forward to future tidbits.

    • http://codyhouse.co/ Sebastiano Guerriero

      Thanks ;)

  • Pratik Sah

    another awesome stuff ! keep going :)

  • Nate

    This is a great template, but I am newer to web dev. In the main section, how do I put content there but specify what shows up when each navigation tab is clicked and then hidden when I click on another one. Would I create separate html pages for each or inside of the main link them with sections or something??? If anyone could help me out I would sincerely appreciate it. Thanks

  • http://www.sfpcoder.com/ sina

    excellent idea
    is it possible to close the menu on document click as well as click the trigger!?

    • http://codyhouse.co Claudia Romano

      yes, you should listen for that event and remove the .nav-is-visible class from the , and element.

  • Keykan

    Thank You dear Claudia for your good idea,
    how can i put this 3D navigation in right side of page (like http://www.followbubble.com) instead of top?

    • http://codyhouse.co Claudia Romano

      Hi Keykan, glad you liked it! It requires some changes though. You can start by assigning a translateX(-100%) (instead of translateY) to the .cd-3d-nav-container, setting a different width and height. Also set a translateX (instead of translateY) in the .nav-is-visible class. Hope this helps!

      • Keykan

        Hi Claudia, Thank you for replying. :)
        I try to do that you say. it’s ok. but a little problem exist.

        1. I don’t want to use cd-marker class (Sceenshot #1). So i try to remove span element (with cd-marker class) from HTML. but click event stop working. in the other words by clicking on each menu options, menu is not closed.

        2. after changing the position from top to right, i see a little delay during open and closing menu. (Screenshot #2)

        How can i solve it?

        I put CSS file in below link:

      • Keykan

        Hi Claudia, Thank you for replying. :)
        I try to do that you say. it’s ok. but a little problem exist.

        1. I don’t want to use cd-marker class (Sceenshot #1). So i try to remove span element (with cd-marker class) from HTML. but click event stop working. in the other words by clicking on each menu options, menu is not closed.

        2. after changing the position from top to right, i see a little delay during open and closing menu. (Screenshot #2)

        How can i solve it?

        I put CSS file in below link:

  • Keykan

    Hi Claudia, Thank you for replying. :)
    I try to do that you say. it’s ok. but a little problem exist.

    1. I don’t want to use cd-marker class (Sceenshot #1). So i try to remove span element (with cd-marker class) from HTML. but click event stop working. in the other words by clicking on each menu options, menu is not closed.

    2. after changing the position from top to right, i see a little delay during open and closing menu. (Screenshot #2)

    How can i solve it?

    I put CSS file in below link:

    (Excuse Me. How can I get in touch with you other than Twitter? like Email or Facebook? I couldn’t signup on Twitter. My Country is not listed in it! )

    • Abdul Razak

      Hi keykan, if you want to remove cd-marker you can remove it through css

  • mlevy23

    are you kidding me… #imagine

  • Sandesh Damkondwar

    Awesome thanks :)

  • Ash

    Wow, nice.

    What icon pack did you use? Having issues getting other icons to work properly.

    • http://codyhouse.co Claudia Romano

      This could happen if you’re using bigger icons – we created sprites (combining two 32px icons) . You can find them in the img folder

  • Amir

    How can I manage tabs to show a page, I tried dir-content but it didn’t work

  • Glaucia Rezende

    Sensacional! Obrigdada… TKS!

  • Antonio

    Awesome! this is a great and smooth design, thanks for create works like this, cool way to learn!

  • cracka TRU $$$

    It is possible to leave the selected item marker glitched out of place because some browsers will fire resize multiple times during resize event. so i fixed it

    var t=null;

    $(window).on(‘resize’, function(){


    var t = setTimeout(function(){




  • Kojiro

    Hi. Thanks. It’s appear that when resizing browser’s window, position of .cd-marker “span” changes. Can you solve it?

    • http://codyhouse.co Claudia Romano

      Hi Kojiro, the position of the .cd-marker changes because the position of the cd.slected list item changes too!

      • Kojiro

        Hi. .cd-maker position changes incorrectly when resize the browsers window. How can I solve it?

        • Kojiro

          Hi. When I resize fire fox window, position of .cd-maker changes, but incorrectly. How can I solve it?

          • http://codyhouse.co Claudia Romano

            Hi Kojiro, I just tested it on Firefox 37.0.2 and it’s working fine. Which Firefox version are you using? Make sure to properly include the main.js file.

          • Kojiro

            Hi Claudio. OK it is working on firefox 38.0 too. Thanks. How can I change this menu to “Right to left”? Please help me.

          • Kojiro

            This Picture

          • http://codyhouse.co Claudia Romano

            Hi Kojiro. now I see the problem. I’m gonna fix it. Meanwhile, in the main.js file on line 5 (right after toggle3dBlock(..)), try adding:

            That should fix the problem!

          • Steven

            Hello, I know this was a while ago but I tried putting in that code and I have this problem still :/, any ideas what might be the cause?

          • http://codyhouse.co Claudia Romano

            Hi Steven, did you download the last version of the resource? The bug should be fixed

          • Steven

            Yes I did, It’s likely because I messed with the settings.

  • Leonardo

    Very nice, the estetic of the Element is elegant and simple.

  • HumanV3

    Finally found a great use case for this menu. Question: When it comes to content switching, what do you propose in order to keep the animations and everything? I direct linked files on first run but that just cuts the animation off and doesn’t keep the select marker in the right place (even after adding the class to the appropriate element.) Suggestions? :)

    • http://codyhouse.co Claudia Romano

      Hey, you may try updating the page content (using an ajax call rather than a redirect). But it really depends on your page content.

  • http://www.websitescreated.co.uk/ Hayden Williams

    Hi Claudia

  • mcbi23

    Hey! Great work.
    Unfortunately I am having a problem where the .cd-marker element isn’t moving into the right position until the page is resized

    • http://codyhouse.co Claudia Romano

      Hi, thanks! ;)
      Is this a problem you’re experiencing with our demo? And on a particular browser? thanks

      • mcbi23

        I more or less copied the code into an existing sass project and I’m viewing it in Google Chrome

        • http://codyhouse.co Claudia Romano

          Hey, I just checked our demo on Chrome and it works fine. I would suggest you to double check the code to be sure you didn’t forget anything! ;)

  • kry82

    i have a problem. all works fine till i put the html links in the menu. the colored line does not more switch to the icon that i click. i´m just changing the #0 to name.html and set the selected tag to the active point on the new site.

    can you help me?

    • http://codyhouse.co Claudia Romano

      Hi, you may try updating the page content (using an ajax call rather than a redirect), or prevent the redirect and, at the end of the animation, redirect to your new page. Hope this helps!

      • Fee Alvi

        Hi, Can you give an example of a simple ajax call like that I am having a heck of a time with it.

  • Ariel Ribeiro

    if I use a different icon and click one of the links the icon disappears. I saw that in your svg code has two “path”, but they are not exactly alike. How do I do this? Sorry for bad english.

    • http://codyhouse.co Claudia Romano

      Hi Ariel,
      we use a sprite svg image. Basically the same icon is replicated in a grid, but with a different fill color.

  • Mohammad Umar Sattar

    Really nice work….good :) :) :)

  • Chris Swanger

    so i see other people have had the issue of when they add an html link or url to the link, the final animation of the bar going across to the button, and the flip close animation do not finish playing. it just clicks directly to the new page. How do i make it finish the animation before going to the next page??? i saw the ajax post but i have no idea what i would do – i just want the animation to finish before continuing on to the link. any help would be appreciated. thanks.

  • Francesco Cortese

    Great, I love this one!

  • Caitlin

    Hi, I’m still having trouble getting this to work with switching the content in . I’ve tried some things below but it’s just not working. Does anyone have a JSfiddle or CodePen I can look at?

  • Celestail Petals

    I think it would be nice to use this at the bottom of the page. How would you reverse it to use it at the bottom?

    • http://codyhouse.co Claudia Romano

      Hi, you should try positioning the .cd-3d-nav-container at the bottom of the page (bottom: 0 instead of top:0), with a translateY: 100% (instead of translateY: -100%); for the .cd-3d-nav element, a rotateX: 90deg ( instead of -90deg). Hope this helps!

  • Niels Bussels

    Hello Claudia, is there a possibility to get the full navigation fixed to the top? (including the span(s))

    Thanks in Advance

  • Tim Holley

    Hi Claudia,

    I’m having an issue with this navigation, where i’m using it to scroll to different parts of my site. The links are hitting their target, but the issue is that with the translatey(170px) happening, the link is going to it’s spot while the page is moving up, so that the landing spot of my link is 170px off. I’ve tried a bunch of different ways to get around this.

    The way that I have right now is trying to delay the click from happening before the animation is done, which you can see by clicking on my “services” link. the only part that isn’t working is the preventdefault to stop it from scrolling in the first place.

    Please check this out and let me know if you have any ideas


  • Heitor Serra

    Hello Claudia , I am Brazilian and NOT speak English well , THEN I will USE paragraph google translator trying to communicate with you and Take My question NOT YOU to bother .

    And Next , I hum Problem , When I Roll Up one page Down realize what the FICA Up Fund plan menu, but When I come Page Elements ends up OVER make menu according to Image que put attached.

    Also happened que my Fund plan GOT OUT OF THE place and not my case IT NOT be a good thing, because I created tons different Pará Other elements NOT want THEN That the Fund plan was changed, teria How do you change ISO paragraph THAT NOT script climb the Fund plan?

    Thank you and hope ANSWER What has understood my question in English THIS Terrible.


    Olá Cláudia, sou Brasileiro e não falo bem o Inglês, então irei usar o google tradutor para tentar me comunicar com você e tirar minhas dúvidas se não for lhe incomodar.

    É o seguinte, tenho um problema, quando eu rolo a página até abaixo percebo que o menu fica acima do plano de fundo, mas quando chego em elementos da página acaba por ficar por cima do menu conforme a imagem que coloquei em anexo.

    Também aconteceu que meu plano de fundo ficou fora do lugar e no meu caso isso não seria uma boa coisa, porque criei tons diferente para outros elementos e não gostaria então que o plano de fundo fosse alterado, teria como mudar isso para esse script não subir o plano de fundo?

    Agradeço a resposta e espero que tenha compreendido a minha pergunta com esse inglês terrível.

    • http://evandrocamargo.me Evandro Camargo

      Se você estava preocupado com seu inglês, traduzi seu post da melhor forma que pude, pra expressar melhor suas dúvidas. Espero que eu tenha entendido tudo corretamente. :)

      Tratando-se da sua dúvida, tentou inspecionar esses elementos e verificar a propriedade CSS “z-index”? Eu não li o artigo todo mas, me parece que seu problema de overlap dos elementos é que eles deveriam ter um z-index inferior ao seu top-menu. Veja se isso ajuda! ;)


      Hi Claudia, I’m Brazilian and barely speak english, so I’m using Google Translator while trying to help you understand me and solve a few questions I have if that’s ok.

      Alright so, I have a problem here: whenever I scroll down the page I realize that the menu stays on top of the background, but when I reach some other page elements they stay on top of the previous menu (see attached image.).

      Another side effect is that my background came out of place and in this case that’s not good at all since I’m using several different shades for each other element and would not like to alter the background content in any way. Is there any way to change this script and make the background not scrollable?

      I honestly appreciate the answer and hope that you might have understand my question with such a “terrible” english.

  • Treavies Agassy

    greetings! i really loves your masterpiece. can i use this for commercial? of course i`ll adds this link at my page. and ill make a little different. thanks

    • http://codyhouse.co Claudia Romano

      Hi Treavies, give a look at our License page:

      • Treavies Agassy

        yeah i read that already. then if i want to create a website for promoting my band purpose its free to use? thanks

  • Ilse De

    I think there is a problem with the marker in Chrome. Theres no color transtition for the line, just for the triangle of the marker. I worked with it in Firefox and ran perfectly until i tested it on Chrome.

    And I don’t know why my jquery for loading a content into de div it’s not working either. :C

    • http://codyhouse.co Claudia Romano

      Hi, thanks for the heads-up! Fixed now ;)

  • Bob

    Can u make like submenus with also the dropdown animation?

  • Robert William Wagner

    Really awesome nav menu guys! I’m working on making an Ember addon for this to be used with Ember apps easily. You can follow my progress here: https://github.com/rwwagner90/ember-3d-nav .

    Would you like me to link back to your github page or this page?

    • http://codyhouse.co Claudia Romano

      Hi Robert, good job ;) The article page sounds fine thanks!

      • Robert William Wagner

        Thanks Claudia! You guys have created some really beautiful UI elements. I’d like to convert several of them into Ember addons and make them as configurable as possible, for ease of use. Would you guys be interested in helping out with this effort either collaborating on code or just reviewing my work and offering suggestions?

        • http://codyhouse.co Claudia Romano

          Hi Robert, unfortunately we will not be able to help you. Cheers

          • Robert William Wagner

            No worries Claudia. Just an update, I am using flexbox to allow for variable numbers of nav items, without having to set it explicitly. I have also made it possible to override the sass variables and change colors easily. Still working on a few tweaks, but it should be mostly complete soon.

  • Albert Lua

    I’m having a problem that I absolutely cannot figure out why it’s doing such. The unordered list bullet points come up, and the widths don’t act right. I’ve tried removing other stylesheets, JS scripts, hiding the bullets, and nothing seems to work. Any light on this?

    • Albert Lua

      Whoop! Problem fixed! Some conflicting styles was the cause after all, and to overcome that, simple as including the reset.css file included in the archive… almost had a sleepless night.

  • Richard

    Hi, how to set css a different element when open menu?, for example:

    header#ha-header {
    margin-top: 20%;

    I would like to set the header so when I press on the menu, it can be do?

    thank you