Ограничить логику поворота jQuery/CSS3 всегда по часовой стрелке

Question

Я использую транзитный плагин jQuery, чтобы вращать элемент блока с 4 элементами навигации; каждый раз, когда щелкается навигационный элемент, повернутый блок должен поворачиваться к пользовательскому атрибуту данных этого навигационного элемента (0, 90, 180 или 270 градусов).

Я могу успешно сделать это (см. Мой jsfiddle: http://jsfiddle.net/xkdgdhbk/, протестирован только в Chrome), но я бы хотел ограничить вращение ВСЕГДА по часовой стрелке. Как вы можете видеть, если вы нажмете 180 градусов, он пойдет по часовой стрелке, но затем, если вы нажмете 90 градусов, он пойдет против часовой стрелки. Я бы хотел, чтобы элемент всегда вращался по часовой стрелке, если это возможно.

Есть ли способ добиться этого?

Вот мой скрипт из jsfiddle:

$("span").click(function(){
    $(".rotate").transition({ rotate: $(this).attr("data-rotate") + "deg"});
});

Answer 1

Вы можете сохранить предыдущее значение поворота в элементе $(. Rotate) и использовать его для каждого поворота примерно так:

$().ready(function()
{
    $("span").click(function()
    {
        var lastRotate = $(".rotate").attr("data-rotate");
        if(lastRotate ==undefined)
        {
            lastRotate = 0;
        }
        lastRotate = parseInt(lastRotate);
        var newRotate = lastRotate + parseInt($(this).attr("data-rotate"));
        $(".rotate").transition({ rotate:newRotate  + "deg"}).attr("data-rotate",newRotate);
    });
});