jQuery - 在點擊div時同時調整和旋轉轉換

Question

我正在嘗試使用jQuery進行div旋轉和增長。這裏是我的JS：

var degrees = Math.random() * 20; 

var flag = 0; 

$(".rotate").click(function() { 
    if (flag == 0) { 
     flag = 1; 
     $(this).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)', 

      '-webkit-transform': 'scale(2)', 
      '-moz-transform': 'scale(2)', 
      '-ms-transform': 'scale(2)', 
      '-o-transform': 'scale(2)', 
      'transform': 'scale(2)' 
     }); 
     degrees = Math.random() * 20; 
    } else { 
     flag = 0; 
     $(this).css({ 
      '-webkit-transform': 'rotate(0deg)', 
      '-moz-transform': 'rotate(0deg)', 
      '-ms-transform': 'rotate(0deg)', 
      '-o-transform': 'rotate(0deg)', 
      'transform': 'rotate(0deg)' 
     }); 
    }; 
}); 

我的問題是，旋轉是工作，直到我說的縮放比例，此時股利將增長，但不能轉動。爲什麼是這樣，我該如何解決它？只需要添加一下，在我的CSS中，我已經包含了轉換，以便轉換動畫。這裏是一個jsfiddle：http://jsfiddle.net/HamishT/4Lhyaxwn/

Answer 1

如果你給相同的財產拖兩次它被覆蓋。試試這個

var degrees = Math.random() * 20; 

var flag = 0; 

$(".rotate").click(function() { 
    if (flag == 0) { 
     flag = 1; 
     $(this).css({ 
      '-webkit-transform': 'rotate('+degrees+'deg) scale(2)', 
      '-moz-transform': 'rotate('+degrees+'deg) scale(2)', 
      '-ms-transform': 'rotate('+degrees+'deg) scale(2)', 
      '-o-transform': 'rotate('+degrees+'deg) scale(2)', 
      'transform': 'rotate('+degrees+'deg) scale(2)', 


     }); 
     degrees = Math.random() * 20; 
    } else { 
     flag = 0; 
     $(this).css({ 
      '-webkit-transform': 'rotate(0deg)', 
      '-moz-transform': 'rotate(0deg)', 
      '-ms-transform': 'rotate(0deg)', 
      '-o-transform': 'rotate(0deg)', 
      'transform': 'rotate(0deg)' 
     }); 
    }; 
}); 

Answer 2

你是通過設置兩次覆蓋transform財產。設置的值轉換爲rotate(xdeg) scale(y)

所以，它看起來像

'transform': 'rotate('+degrees+'deg) scale(2)', 

此外，更新瀏覽器的特定屬性，因此。 (JSFiddle)