动态旋转与平滑恢复


动态旋转与平滑恢复

需求:使用CSS+JavaScript实现以下Web效果:

  1. 三个DOM元素:一张图片,两个按钮
  2. 点击开始按钮,使图片开始不停旋转(rotate0 -> rotate360)
  3. 点击停止按钮,图片停止旋转,并平滑恢复到初始状态

小结:

  1. 抽象了函数 getMatrixFromDegree() 和 getDegreeFromMatrix() 用于矩阵和角度间的转换
  2. 需要加深理解 transform 和 matrix 的关系原理

实现:



  
G