← Back to articles

CSS Flip navigation

posted Wednesday, May 2, 2012

I have always been a huge fan of StruckAxiom's work, especially their new metro style personal website. They always produce very clean and subtle interactions with their interface elements. I especially love the capabilities section on their about page. While struck has soft and likeable animations and interactions, they build everything in flash. But this is 2012, and Steve told us flash is dead. And in that respect, I created a navigation element that simulates this animation using only CSS3. I had to use anchors to force it to work on an iDevice (the :hover pseudo class won't work on touch screen devices) but it does the job quite well.

View demo here

The markup for this is actually quite simple. The block requires 5 divs. A parent wrapper, a wrapper for the tab with two divs (one for the front side and one for the back side) and a base div that gets revealed.

HTML

<div class="cell">
    <div class="flap">
        <div class="front"></div>
        <div class="back"></div>
    </div>
    <div class="base"></div>
</div>

CSS

// The parent cell
.cell {
    width: 300px;
    height: 100px;
    position: relative;
}

// The flap that will animate. Contains .flap .front and .flap .back
.cell .flap {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-perspective: 800; // To make the flip animation 3D and not flat
}

// Front side of the flap. 
.cell .flap .front {
    background: #cfcfcf;
    z-index: 1;
    -webkit-transform-origin: 150px 100px;
    -webkit-backface-visibility: hidden; // hide the back when it flips
    color: rgba(0, 0, 0, 0.25);
}

// Back side of the flap.
.cell .flap .back {
    background: #ff5555;
    color: #fff;
    box-sizing: border-box;
    padding: 20px;
    font: bold 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    -webkit-transform: translate(0px, 100px) rotatex(180deg);
    -webkit-transform-origin: 150px 0px;
    -webkit-backface-visibility: hidden;
}

// When we hover the cell, animate the front
.cell .flap:hover .front {
    -webkit-transform: rotatex(180deg);
    -webkit-animation: flipFront 0.8s ease-out 0s;
}
// When we hover the cell, also animate the back
.cell .flap:hover .back {
    -webkit-animation: flipBack 0.8s ease-out 0s;
    -webkit-transform: translate(0px, 100px) rotatex(0deg);
}
// The base which will be revealed after animation
.cell .base {
    width: 100%;
    height: 100%;
    background: #ff5555;
    color: #fff;
}

// Styles for the front and back. Modify these as you please.
.cell .front,
.cell .base {
    padding-left: 20px;
    box-sizing: border-box;
    font: bold 54px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    line-height: 95px;
}

// Animation for the front flap.
@-webkit-keyframes flipFront {
    0% {
        -webkit-transform: rotatex(0deg);
        background: #cfcfcf;
    }
    50% {
        -webkit-transform: rotatex(-220deg);
    }
    80% {
        -webkit-transform: rotatex(-160deg);
    }
    100% {
        -webkit-transform: rotatex(-180deg);
        background: #000;
    }
}
// Animation for the back flap.
@-webkit-keyframes flipBack {
    0% {
        -webkit-transform: translate(0px, 100px) rotatex(180deg);
        background: #ff5555;
    }
    50% {
        -webkit-transform: translate(0px, 100px) rotatex(-40deg);
        background: #ff4444;
    }
    80% {
        -webkit-transform: translate(0px, 100px) rotatex(20deg);
        background: #ff5353;
    }
    100% {
        -webkit-transform: translate(0px, 100px) rotatex(0deg);
        background: #ff5555;
    }
}