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旋转
rotate属性4</a>
OK了，如果觉得这篇⽂章有意思，就赞⼀个吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。