CSS3如何实现图片动态任意角度旋转
要用javascritp控制图片的旋转是一件非常困难的事情，大段的代码，非常头痛。
但是，有一种的好东西叫做CSS3。
CSS3里面有个属性叫做transform，他有一个属性叫rotate(xdeg). 也出来就是transform: rotate(xdeg). 当然大家写的时候要写上兼容头.比如sar和chorm就该写-webkit-transform:rotate(xdeg); (x代表想要旋转的角度);
这样当对象加上类如mouseover 或 click 事件时， 该对象会顺时针旋转x度;
这样的效果视乎并不好，因为他是瞬间的，我们得要让他缓动的过渡起来!
于是.... transition开始登场，这个属性就是过渡的意思, 我们可以写transition: all 0.3s ease-in-out 0.1s;(大家写的时候加兼容头) 解释一下这四个属性的意思吧: 第一个all 代表的是所有的属性要过渡(当状态发生改变的时候), 第二个属性代表从当前状态到目标状态所要耗费的时间, 第三个属性就是一个缓动函数, 也就是它该如何运动; 第四个参数代表的是延迟的时间.
我通常会在代码中写道:
1 *{ 2 -webkit-transition:all .3s ease-in-out .1s; 3 -moz-transition:all .3s ease-in-out .1s; 4 -o-transition:all .3s ease-in-out .1s; 5 }
这两个属性transition跟transform在ie里基本是废了，貌似在9+在有用...珍爱生命，远离IE！！
接下来我把我写的demo给大家看看，我用的是Chorm，兼容头没写全，大家别学我...
css部分:
1 <style> 2 *{ 3 -webkit-transition: all .3s ease-in-out .1s; 4 -moz-transition: all .3s ease-in-out .1s; 5 -o-transition: all .3s ease-in-out .1s; 6 } 7 #demo{ 8 display: block; 9 width: 100px; 10 height: 100px; 11 background-image: -webkit-linear-gradient(#333,#555); 12 background-image: -moz-linear-gradient(#333,#555); 13 background-image: -o-linear-gradient(#333,#555); 14 -webkit-border-radius: 50px; 15 -moz-border-radius: 50px; 16 -o-border-radius: 50px; 17 border-radius:50px; 18 font-size: 24px; 19 font-weight: 600; 20 line-height: 100px; 21 color :#FFF; 22 text-align: center; 23 } 24 #demo:hover{ 25 background-image: -webkit-linear-gradient(#444,#666); 26 background-image: -moz-linear-gradient(#444,#666); 27 background-image: -o-linear-gradient(#444,#666); 28 -webkit-transform: rotate(360deg); 29 -moz-transform: rotate(360deg); 30 -o-transform: rotate(360deg); 31 } 32 </style>
HTML部分:
1 <body> 2 <a id="demo"> 3 旋转 4 </a>
OK了，如果觉得这篇文章有意思，就赞一个吧。
