Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

3D Flipping Menu For Blogger

After sharing several navigation menu including drop down menu for blogger, today i will be sharing one of the best horizontal navigation menu ever. We have put in all possible best to design this cool navigation menu to fits in any blogspot template and it doesn't require any jQuery or JavaScript, just pure CSS and HTML. We shared a tutorial on transition effect but this one shows 3D flipping effect on mouse hover.

Navigation Menu Series
5. 3D Flipping Menu For Blogger

How To Add It To Blogger

Adding CSS Code
  • Go to your dashboard
  • Click on Template > Edit HTML > Proceed
  • Use ctrl F to ]]></b:skin> and paste the following code above it

        /* 3d Flipping Menu By RealcomBiz.com */
        .block-menu {
            display: block;
            background: #000;

        .block-menu li {
            display: inline-block;

        .block-menu li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;

        /* animation domination */
        .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 {
                cursor: pointer;

            .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;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);

        .back {
            -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 {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

  • Save your template

Adding HTML code 

  • Go to Layout > Add a Gadget (under header section)
  • Choose HTML/JavaScript and paste the following code in the content box.

<ul class="block-menu">
<li><a href="#" class="three-d">
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
<li><a href="#" class="three-d">
About<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
<li><a href="#" class="three-d">
<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
<li><a href="#" class="three-d">
<span class="three-d-box"><span class="front">Blogging</span><span class="back">Blogging</span></span>
<li><a href="#" class="three-d">
Create this
<span class="three-d-box"><span class="front">Create this</span><span class="back">Create this</span></span>

  • Edit the highlighted part above
  • Save your widget and you are done!

Hope you find this menu useful for your blog? Any queries or suggestion is welcome

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

9 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. This comment has been removed by the author.

    1. Remove this symbol # and use your link only.

  2. i did this..
    but the menu was not on my blog????

    plzzz mail me

    1. I guess you are making mistake somewhere. Cross-check the procedure and follow it as explained.

  3. Education enable a man to choose good and evil, knowledge use these senses. God has granted to a man sense of taking decision like custom essay writers. That give a way for choosing right and wrong

  4. Awesome tutorial.

    can you please make it floating on top of blogger header.


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger