如图,点击更换,旁边的的小圆圈旋转一定的角度。
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);呃,有点懵,待有时间再研究研究。
纪念第一次发了个小小的技术博客,哈哈哈哈哈哈!!