3D Folding Menu Effect With CSS

Demo

For this tutorial I chose to design the menu as a ribbon just to make it look more interesting and I am sure everybody likes ribbons (by the way I did a tutorial on how to create a ribbon). This effect works on Chrome, Firefox, Safari and IE10. It is not supported by Opera yet.

HTML

Let’s get started with the HTML.

<div id="menu">
    <div id="end-rib-left">
        <div id="rib-left"></div>
    </div>
    <div id="all-bts">
        <div id="pos-bt1">
            <a href="#" class="bt-wrapper">HOME</a>
        </div> 
        <div id="pos-bt2">
            <a href="#" class="bt-wrapper">ABOUT</a>
        </div> 
        <div id="pos-bt3">
            <a href="#" class="bt-wrapper">CONTACT</a>
        </div> 
    </div>
</div>

CSS

I am giving you the CSS for the ribbon effect but if you are not interested you can go to the next snippet.

#end-rib-left {
    width: 0px;
    height: 50px;
    margin: 30px auto 40px;
    padding: 20px 10px;
    position: relative;
    background: #87C695;
    float: left;
}

#end-rib-left:before {
    position: absolute;
    left: -78px;
    bottom: -18px;
    border: solid 45px #6A9666;
    border-right-width: 50px;
    border-left-color: transparent;
    content: "";
    z-index: -1;
}

#end-rib-left #rib-left:before {
    position: absolute;
    bottom: -18px;
    border-style: solid;
    border-color: #557F4F transparent;
    content: "";
    left: 0;
    border-width: 18px 0 0 18px;
}

#menu {
    width: 380px;
    margin: 0 auto;
}

.bt-wrapper {
    width: 120px;
    height: 90px;
    margin-top: 30px;
    line-height: 90px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background:#7EB78B;
    float:left;
    display: block;
    z-index: 100;
            transform-origin: left center;
        -ms-transform-origin: left center;
    -webkit-transform-origin: left center;
            transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
}

#all-bts {
    position: relative;
}

#pos-bt1, #pos-bt2, #pos-bt3 {
    height: 150px;
    position: absolute;
    transform-style: preserve-3d;
            perspective: 500px;
       -moz-perspective: 500px;
    -webkit-perspective: 500px;
}

#pos-bt2 {
    left: 120px;
}

#pos-bt3 {
    left: 240px;
}

.bt-wrapper:hover {
            transform: translate3d(0,0,0) rotate3d(0,1,0,-30deg);
        -ms-transform: translate3d(0,0,0) rotate3d(0,1,0,-30deg);
    -webkit-transform: translate3d(0,0,0) rotate3d(0,1,0,-30deg);
}

.bt-wrapper:hover .bt{
    background: #77A874;
}

The most important things to remember in order to make this work are first to create a wrapper div and apply the perspective CSS property to it. In this tutorial the wrappers are #pos-bt1, #pos-bt2, #pos-bt3. Then inside your wrapper you need to add the element to which the effect will be applied (in our case it’s the a element) and you apply the transform property to it.

#pos-bt3:after {
    top: 30px;
    position: absolute;
    border: solid 45px #7EB78B;
    border-left-width: 10px;
    border-right-color: transparent;
    content: "";
    z-index:-2;
}

I hope you enjoyed this tutorial. Don’t forget to leave a comment and share.