jquery - 增量变换旋转

Question

我想要一个按钮，每次单击时将元素旋转 5 度。我已经能够用边框宽度做这种事情了，比如

  $(document).on('click', '.brdr_width_up', function() {
        $(ws.currentCell).css({'border-top-width' : '+=1', 'border-right-width' : '+=1','border-bottom-width' : '+=1','border-left-width' : '+=1'});
 });

但是同样的想法似乎不适用于transform:rotate:

    $(document).on('click', '.rotate_cw', function() {
        $(ws.currentCell).css({'-webkit-transform': 'rotate(+=5deg)'});
        $(ws.currentCell).css({'-moz-transform': 'rotate(+=5deg)'});
        var deg = $(ws.currentCell).css({'-moz-transform': 'rotate()'});
     });

上面的 var 行不会带回当前的旋转，以便我可以添加到它。

有人知道如何做到这一点吗？

谢谢

Answer 1

如果您不想弄乱矩阵，您可以使用数据属性来跟踪旋转，并执行类似这样的操作:

$(document).on('click', '.rotate_cw', function() {
    var r = $(ws.currentCell).data('rot') + 5;
    $(ws.currentCell).css({
      '-webkit-transform': 'rotate('+r+'deg)',
         '-moz-transform': 'rotate('+r+'deg)',
          '-ms-transform': 'rotate('+r+'deg)',
           '-o-transform': 'rotate('+r+'deg)',
              'transform': 'rotate('+r+'deg)'
    }).data('rot', r);
});

FIDDLE