transform动画之rotate与scale的怪异现象

伴随着HTML5同时进入大家视线的，还有CSS3。

自从有了CSS3，我们就可以通过transform和transition来玩一下css动画效果了(当然别忘了还有animation和keyframe哦)。

一般我们的动画效果都不会很复杂了，例如单纯的rotate或scale。

可是，当它们这对基友走在一起的时候，会发生什么现象呢？

如果只是单纯的rotate+scale，没有动画，那么不会有什么问题(聪明的你如果看到后面，应该能明白为什么没有问题^_^)；

如果有动画，那么就会发生很奇怪的现象：

firefox 36.0：

1. 小于180deg：正常
2. 等于180deg：永远顺时针
3. 大于180deg：顺逆反向(注意和小于180deg时的动画作对比)
4. 等于360deg：无效

chrome 38.0.2125.111：

1. 小于180deg：正常
2. 等于180deg：顺逆反向
3. 大于180deg：顺逆反向
4. 等于360deg：无效

safari 7.1(9537.85.10.17.1)：

1. 小于180deg：正常
2. 等于180deg：永远逆时针
3. 大于180deg：顺逆反向
4. 等于360deg：无效

ie 11.0.9600.16428：

1. 小于180deg：正常
2. 等于180deg：永远顺时针
3. 大于180deg：顺逆反向
4. 等于360deg：无效

上面仅仅列举了比较有代表性的几个浏览器，还有很多其他的浏览器，就不一一测试了；
我做了个demo，为了节约代码，我使用hover+transition+transform的组合作演示，
有兴趣的童鞋请狠狠地点击！

也许配合其他属性，混用后还会有其他怪异现象，请各位大开脑门吧，哈哈~

前面提到过没有动画时是不会有什么问题的，这里解下谜底吧：
这里的怪异现象主要是动画的怪异，如果没有动画，还谈什么怪异不怪异的呢？？？

关于上面的情况，还有几点需要注意的：

• 触发怪异现象的条件是：动画前scale，动画后rotate+scale(也许还有其他条件，自己组合尝试吧)
• 不管是transition动画还是animation动画，都有这样的问题(聪明的你知道怎么写吧)
• 当角度等于360deg时，动画无效(又一个怪异现象)
• 当角度大于360deg时，自动换算成小于等于360deg处理(竟然还有怪异现象，惊呆了)