Javascript CSS转换：旋转-不理解为什么我'；我有这种行为

所以，我有一份三条的菜单。单击时，中间条淡出，其余两条移动以占据相同的空间，然后分别旋转405度和-405度以形成X。下一次单击时，这两条相同的条将旋转45度回到其原始位置，中间条淡入

这是小提琴：

以下是JS/jQuery：

$(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);
        }
    }
});

问题是：这会在

openMenu（）

上产生正确的405度旋转，在

closeMenu

上产生正确的45度旋转，但在随后的每个

openMenu（）

上，我只得到45度旋转，而不是第一次单击时得到的405度旋转。我显然不明白CSS转换是如何工作的

编辑**：我试过在打开时做405度，然后在关闭时做0度，这与405度旋转完全相反。我总是试图在打开时旋转405度，在关闭时仅旋转45度。也许需要有一个JS函数，在每次单击后将405添加到原始旋转

---

任何想法和想法都会一如既往地受到赞赏。

我认为你想要实现的是回到0度（起点）而不是360度的动画。试试这个（）：

---

对不起，我应该把我已经试过的东西贴出来，因为那是其中之一。这将产生与原始405度旋转完全相反的方向。我试着每次打开405度，关闭45度。

function closeMenu() {
        nav.stop(true, true).animate({
            'left': '-=145px'
        }, 200);
        footerHidden.animate({
            'bottom': '-=80px'
        }, 200);
        bar.css('background', '');
        barOne.css(transformMenu('3px', 'rotate(0deg)'));
        barTwo.css(transformMenu('13px', 'rotate(0deg)'));
        if (nav.is(':animated')) {
            barThree.delay(200).fadeIn(200);
        }
    }