关于CSS3旋转属性rotate,在js点击事件中只触发一次的问题

如图，点击更换，旁边的的小圆圈旋转一定的角度。

js如下:

var rotateNum = 360; //旋转角度
$('.refresh-js').on('click',function(){
$('.img-js').css({
'transition': 'all 1s',
    '-webkit-transition': 'all 1s', /* Safari */
'transform':'rotate('+rotateNum+'deg)',
'-ms-transform':'rotate('+rotateNum+'deg)',
'-webkit-transform':'rotate('+rotateNum+'deg)'
});
rotateNum=360+rotateNum;

});

这里的关键就是，上述标红的两处。

rotate的旋转机制：是在此前已旋转的的基础上进行旋转；

所以说每次进行旋转操作时，都要加上已经旋转过的角度。

嗯，我的理解就是这样,小圆圈转的很开心。

ps:还有一种比较高级的方式，就是通过js获取当前已经旋转的角度，console.log($('.img-js').css('transform'));打印出来的是一个矩阵数值matrix(1, 0, 0, 1, 0, 0)；呃，有点懵，待有时间再研究研究。

纪念第一次发了个小小的技术博客，哈哈哈哈哈哈！！