限制jQuery / CSS3旋轉邏輯使其始終順時針旋轉

Question

我正在使用jQuery運輸插件來旋轉具有4個導航控件的塊元素； 每次單擊導航項目時，旋轉的塊應旋轉到該導航項目的自定義數據屬性（0度，90度，180度或270度）。

我可以成功地做到這一點（請參閱我的jsfiddle： http : //jsfiddle.net/xkdgdhbk/ ，僅在chrome中進行了測試），但我想將旋轉限制為始終順時針旋轉。 如您所見，如果您單擊180deg，它將順時針旋轉，但是如果您單擊90deg，它將逆時針旋轉。 如果可能的話，我希望元素一直沿順時針方向旋轉。

有沒有辦法做到這一點？

這是我來自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);
    });
});