[RPG] 可以轉的轉盤 jquery css3 transform rotate

在第一篇的頁面裡
http://www.realmofprogrammersgamble.website/journal/ch1/jour1.html

這裡的轉盤其實是可以動的～～（有人發現嗎Q_Q...）
不過在其他頁裡是不能動的～我把他設定成，畫面上角色人有在那操作才可以轉阿～
（OS：沒人在那邊也可以轉的話，那是阿飄阿阿阿～～）

做法麻，還是要先切圖QQ...

然後疊前景（就是那個人）
還得要有一個 點擊區

總合起來起來的html 就是～～
<!-- 轉盤圖-->
<img src="/imgs/egg/egg_t0.png" id="img_t" class="timg" style="left:72%; top: 65%" >
<!-- 前景-->
<img src="/imgs/egg/egg_a0.png" style="width: 100%; height: auto; position: absolute; top: 36px; left:0;" >
<!-- 點擊觸發區域--> 
<div id="clk1" class="imgclick" style="left:72%; top: 65%;"></div>


js 在 init 時加入 click event～ 透過 jquery css 操作 css3 transform
    $( "#clk1" ).css('width', $('#img_t').width());
    $( "#clk1" ).css('height', $('#img_t').height());
    $( "#clk1" ).click(function() {
        img_t_deg += 5;
        imgtrotate(img_t_deg);
    });

function imgtrotate(degrees) {
    $('#img_t').css({
  '-webkit-transform' : 'rotate('+degrees+'deg)',
     '-moz-transform' : 'rotate('+degrees+'deg)', 
      '-ms-transform' : 'rotate('+degrees+'deg)', 
       '-o-transform' : 'rotate('+degrees+'deg)', 
          'transform' : 'rotate('+degrees+'deg)', 
               'zoom' : 1
    });
}

就可以得到這樣的效果～

其中大概有幾點就是，因為 jquery 的 animate 不支援 transform，所以想要做到平滑的轉動是有難度的～ 也許要額外搞一個可以動態產生的 css animate class 出來，但是就又會延申出 remove class/add class 的問題 （因為他是由 click 驅動，人在亂點時，很難跟他說只可以點幾下，不可以double click/balabla...），總之這部份等之後有想到再來實作看看好了～