title: CSS Transform:Rotate - Not Understanding Why I'm Getting This Behavior
body: <p>So, what I've got is a three-bar menu. On click, the middle bar fades out and the remaining two move to occupy the same space and then rotate 405deg and -405deg, respectively, to form an X. On the next click those same two bars rotate 45deg back to their original positions and the middle bar fades back in.</p>
  
  <p>Here's the fiddle: <a href="http://jsfiddle.net/ydxKH/" rel="nofollow">http://jsfiddle.net/ydxKH/</a></p>
  
  <p>Here's the JS/jQuery:</p>
  
  <pre><code>$(document).ready(function () {
  
      $('a.menu').click(function () {
          var i = $(this);
  
          if (i.hasClass('open')) {
  
              closeMenu();
              i.removeClass('open');
  
          } else {
  
              openMenu();
              i.addClass('open');
  
          }
      });
  
      var barOne = $('.menu-bar-top');
      var barTwo = $('.menu-bar-bottom');
      var barThree = $('.menu-bar-mid');
      var menuTrigger = $('nav.sidebar a');
      var nav = $('nav.sidebar');
      var footerHidden = $('footer.hidden');
      var bar = $('.bar');
  
      function transformMenu(top, transform) {
          return {
              'top': top,
              'transform': transform,
              '-webkit-transform': transform,
              '-moz-transform': transform,
              '-ms-transform': transform,
              '-o-transform': transform
          };
      }
  
      function openMenu() {
          barOne.css(transformMenu('8px', 'rotate(405deg)'));
          barTwo.css(transformMenu('8px', 'rotate(-405deg)'));
          nav.animate({'left': '+=145px'}, 200);
          footerHidden.animate({'bottom': '+=80px'}, 200);
          barThree.fadeOut(1);
          bar.not(barThree).css('background', '#fff');
          barThree.css('background', '#303030');
      }
  
      function closeMenu() {
          nav.stop(true, true).animate({'left': '-=145px'}, 200);
          footerHidden.animate({'bottom': '-=80px'}, 200);
          bar.css('background', '');
          barOne.css(transformMenu('3px', 'rotate(360deg)'));
          barTwo.css(transformMenu('13px', 'rotate(-360deg)'));
          if (nav.is(':animated')) {
              barThree.delay(200).fadeIn(200);
          }
      }
  });
  </code></pre>
  
  <p>Here's the problem: This produces the proper 405deg rotation on <code>openMenu()</code> and the proper 45deg rotation on <code>closeMenu</code>, but on each subsequent <code>openMenu()</code> I only get a 45deg rotation instead of the 405deg I get on the first click. I'm clearly not understanding how CSS transform works.</p>
  
  <p>EDIT**: I've tried doing 405deg on open and then 0deg on close, which produces an exact reverse of the 405deg rotation. I'm trying to always rotate 405deg on open and only 45deg on close. Maybe there needs to be a JS function that adds 405 to the original rotation on each subsequent click? </p>
  
  <p>Any thoughts and ideas are, as always, much appreciated.</p>