Инкрементное вращение трансформации

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'}); 
}); 

Но та же идея, кажется, не работает с преобразованием: поворот:

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

И вар линия выше не возвращает текущее вращение, чтобы я мог добавить к нему.

Кто-нибудь знает способ сделать это?

Благодаря

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

Answer 2

использовать следующую функцию (источник: 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/