动态旋转与平滑恢复
动态旋转与平滑恢复
需求:使用CSS+JavaScript实现以下Web效果:
- 三个DOM元素:一张图片,两个按钮
- 点击开始按钮,使图片开始不停旋转(rotate0 -> rotate360)
- 点击停止按钮,图片停止旋转,并
平滑恢复到初始状态
小结:
- 抽象了函数 getMatrixFromDegree() 和 getDegreeFromMatrix() 用于矩阵和角度间的转换
- 需要加深理解 transform 和 matrix 的关系原理
实现:
G
需求:使用CSS+JavaScript实现以下Web效果:
平滑恢复到初始状态小结:
实现:
G