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)