jquery - Transform type navbar -

don't know best way explain i'll give example here "http://www.worldinmylens.com/"

i'm trying replicate same idea aside nav bar in terms of transition in. i'm not sure how go properly

$(document).ready(function() {    $('.handle').on('click', function() {      $('.navbar').toggleclass('showing');    });  });

body {    margin: 0;    padding: 0;  }  .container {    position: relative;    width: 90%;    margin: 20px auto;    perspective: 500px;  }  .navbar {    position: absolute;    left: 0px;    width: 180px;    padding: 20px 10px;    color: white;    background: #333;    opacity: 1;    box-sizing: border-box;    transition: 0.5s ease-in;    transform-origin: left center;  }  .handle {    position: absolute;    top: 200px;    left: 40px;    cursor: pointer;  }  .showing {    opacity: 0;    transform: rotatex(0deg) rotatey(90deg) rotatez(0deg);  }

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>    <div class="container">    <nav>      <div class="navbar">        <ul>          <ol>home</ol>          <ol>about</ol>          <ol>contact</ol>          <ol>blog</ol>          <ol>support</ol>        </ul>      </div>      <div class="handle">click</div>    </nav>  </div>

it kind of works how want, think has flaws, can provide insight how improve , work better?

here go.

a pro tip: if want replicate done elsewhere open developer tools of browser , see how done there. replicating css transitions easy, see styles applied on target element before , after transition, , apply these styles on own element.

var menu = document.getelementbyid("menu");  var menuopenbutton = document.getelementbyid("menuopenbutton");  var menuclosebutton = document.getelementbyid("menuclosebutton");  var menuopenedclassname = "opened";    menuopenbutton.addeventlistener("click", function(event) {    menu.classname += " " + menuopenedclassname;  }, false);    menuclosebutton.addeventlistener("click", function(event) {    menu.classname = menu.classname.replace(menuopenedclassname, "");  }, false);

body {    padding: 0;    margin: 0;    font-family: helvetica, arial, san-serif;    font-weight: 300;  }  #menuopenbutton {    float: left;    margin: 5px;    padding: 10px 20px;    cursor: pointer;    background-color: #f5f5f5;  }  #menu {    position: fixed;    z-index: 10;    width: 200px;    height: 100%;    background-color: #000000;    transform-origin: 0% 0%;    transition-property: transform opacity;    transition-duration: 0.5s;    transition-timing-function: ease;    opacity: 0;    transform: perspective(500px) rotatex(0deg) rotatey(90deg) rotatez(0deg);  }  #menu.opened {    opacity: 1;    transform: perspective(500px) rotatex(0deg) rotatey(0deg) rotatez(0deg);  }  #menu ul {    margin: 0;    padding: 0;    list-style-type: none;  }  #menu ul li {    color: #cccccc;    line-height: 60px;    text-align: center;    border-bottom: 1px solid #212121;  }  #menuclosebutton {    position: absolute;    top: 0;    left: 100%;    padding: 0 20px;    background-color: rgba(26, 26, 26, 0.9);    line-height: 60px;    color: #ffffff;    cursor: pointer;    white-space: nowrap;  }

<div id="menuopenbutton"><i class="fa fa-bars"></i> menu</div>  <div id="menu">    <div id="menuclosebutton"><i class="fa fa-times"></i> close</div>    <ul>      <li>menu item 1</li>      <li>menu item 2</li>      <li>menu item 3</li>      <li>menu item 4</li>    </ul>  </div>