nav rotate

by OwenMelbz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav> <a href="#">work</a>
 <a href="#">studio</a>
 <a href="#">blog</a>
 <a href="#">contact</a>
 <i class="fa fa-bars"></i> 
</nav>
<div>garry</div>
<div id="card" class=" ">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
</div>

CSS

nav {
    width: 400px;
    height: 30px;
    position: fixed;
    top: 0;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    transform-origin: center top;
}
nav a {
    display: inline-block;
    padding: 5px;
    font-family:'Verdana';
    color: black;
    text-decoration: none;
    position: relative;
    height: 30px;
    width: 80px;
    text-align: center;
    font-weight: bold;
    backface-visibility: hidden;
}
nav i {
    width: 14px;
    height: 14px;
    line-height: 20px;
    overflow: hidden;
    position: relative;
    right: 35px;
    top: -3px;
    backface-visibility: hidden;
    transform: rotateY(180deg) !important;
}

.flip {
    transform: translateY( 100% ) rotateX( -180deg );
}

div {
    margin-top: 200px;
}

#card {
    height: 900px;
    background: red;
}

JavaScript

$(function () {

    $('div').on('click', function () {
        $('nav').toggleClass('flip');
    });
    
    $(document).on('scroll', function(e){
        var dist = $(document).scrollTop();
        
        if( dist > 40 ){
            $('nav').addClass('flip');
        }
        else {
            $('nav').removeClass('flip');
        }
    });


});