1

クリックするたびに要素を 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 行は現在の回転を戻さないので、追加できます。

これを行う方法を知っている人はいますか？

ありがとう

4

2 に答える 2

5

マトリックスをいじりたくない場合は、データ属性を使用して回転を追跡し、次のようなことを行うことができます。

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

フィドル

于 2013-05-08T16:48:04.897 に答える
1

次の関数を使用します (ソース: Get element -moz-transform:rotate value in jQuery )

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return angle;
}

回転を取得し、角度に 5 度を追加して再適用するには、たとえば

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

これは、デフォルトの回転が適用されている要素にも機能します。

jsFiddle: http://jsfiddle.net/georeith/px8fL/7/

于 2013-05-08T16:49:02.833 に答える