这篇文章上次修改于 903 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

本来只是想写个DIV旋转特效来着,然后写着写着发现CSS3的特效不太好用(其实是我不会用),于是就考虑用JS来实现旋转,然后很自然的用上了JQ,本来是不想用的.再然后就和标题一样,跑去研究矩阵(matrix)了(喵喵喵?)

这是链接:传送门

这个人确实很强,JS很短,逻辑却很复杂,就是首页做的太丑了.

我一开始的想法是做个旋转动画,用的是CSS3的transform,但是这个缺点也很明显,当鼠标移开时会立刻回到初始状态,这并不是我想要的结果,于是继而使用JS来利用while循环来写,不但没写出来,还让浏览器占用了80%的CPU和接近4G运存,因为写了死循环.而且之前使用的是onmousemove来实现旋转,鼠标移动才转,着实很难看,之后改成了onmouseenter,这样鼠标只需要放上去就会不停旋转了,缺点是会连续执行,当鼠标第二次放上去时就会出现问题.

就在今天我找到了另一个办法,在函数中调用本函数(我看不懂,但我大受震撼)对于JS实现,我采用的是在sleep中再次调用本函数,通过JQ的hover来给一个变量赋值true或者false,然后只要在控制旋转的函数中判断这个值就能实现是否停止循环(即sleep再次调用)

然后问题来了,我获取不到当前旋转的角度!尝试使用JQ的css函数,但是获取到的是矩阵,并且由于每次旋转都是从0开始,我也看不出什么问题,在经过一段时间的搜索之后,了解到transform等动画都是基于矩阵来实现的,也尝试过直接使用矩阵改变CSS样式.大概原理我已经了解了,矩阵的六个值matrix(cosθ,sinθ,-sinθ,cosθ,0,0)拆分成abcdef,经过旋转之后的x'=ax+cy+e,y'=bx+dy+f,但是由于JS的spoil报错了,我也懒得去找原因,所以就换简单的办法了.

一般来说使用spoil是没问题的,但是矩阵的返回结果是matrix(1,0,0,1,0,0)这样的形式,并不是简简单单的数组什么的,因此进行取值更麻烦,还不如用简单的办法.

虽然这次没用上矩阵,但下次会用上的,应该就在不久后