Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make animated flipping menus using css3?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 298
    Comment on it

    hello Readers , here is a simple blog on animated flipping menus using css3. I have created simple animated menus by using transition and rotate property of css3.  In this I have created an unordered list  of menus , on mouse hover on a particular menu it will flip and rotate due to CSS property transform and rotate. 

     

    Below is the HTML code for the same:

    <!doctype html>
    <head>
    
    <link type="text/stylesheet" href="style.css" rel="stylesheet" >
    </head>
    
    <body>
    <ul class="block-menu">
        <li>
        <a href="/" class="three-d">
            Home
            <span aria-hidden="true" class="three-d-box">
                <span class="front">Home</span>
                <span class="back">Home</span>
            </span>
        </a>
        </li>
    
    
        <li>
        <a href="/demos" class="three-d">
            About
            <span aria-hidden="true" class="three-d-box">
                <span class="front">About</span>
                <span class="back">About</span>
            </span>
        </a>
        </li>
    
        <li>
        <a href="/demos" class="three-d">
            Team
            <span aria-hidden="true" class="three-d-box">
                <span class="front">Team</span>
                <span class="back">Team</span>
            </span>
        </a>
        </li>
    
    
    </ul>
    </body>
    </html>

     

    Now we will write the CSS code to perform the above task. Copy the below code in your CSS file .

    .block-menu {
        display: block;
        background: #fff;
    }
    
    .block-menu li {
        display: inline-block;
    }
    
    .block-menu li a {
        
        display: block;
        text-decoration: none;
        font-family: 'Passion One', Arial, sans-serif;
        font-smoothing: antialiased;
        text-transform: uppercase;
        overflow: visible;
        line-height: 20px;
        font-size: 22px;
        padding: 15px 10px;
    }
    
    /* animation domination */
    .three-d {
        perspective: 200px;
        transition: all .07s linear;
        position: relative;
        cursor: pointer;
    }
        /* complete the animation! */
        .three-d:hover .three-d-box,
        .three-d:focus .three-d-box {
            transform: translateZ(-25px) rotateX(90deg);
        }
    
    .three-d-box {
        transition: all .3s ease-out;
        transform: translatez(-25px);
        transform-style: preserve-3d;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
    
    /*
        put the "front" and "back" elements into place with CSS transforms,
        specifically translation and translatez
    */
    .front {
        transform: rotatex(0deg) translatez(25px);
    }
    
    .back {
        transform: rotatex(-90deg) translatez(25px);
        color: #ffe7c4;
    }
    
    .front, .back {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: black;
    
    }

     

    In the above code, I have used simple fonts Arial and sans-serif  and transform property of CSS3 , on mouse hover menu text will rotate on -0 degree and -90 degree on x-axis.

    Note- The following example will run on the latest version browsers such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: