利用css3实现div的旋转
公司项目比较老，css用的也老，所以一些css3的特效作者基本都没怎么关注，今天看了一下css3中的transform
发现可以让div进行旋转，觉得有一些常见的特效可以自己实现下，于是做了做，效果还可以，我把代码贴出来，
记录一下，万一哪天用上了呢，是吧。
这篇用的都是jQuery的css，因为不同浏览器的兼容样式名字不一样，设置起来太麻烦了，感觉有轮子可用，何苦呢。
另外我原生js也不太好，而且给其他人未必能维护好。
1)div随着鼠标进行旋转
主要的js代码如下
1 $(document).ready(function () { //我管那个div叫button，本来是想设计按钮来的
2 //要button中心得重新计算中心点，目前用左上角
3
4 $btn = $('.btn');
5 var offset = $btn.offset();
6
7
8 $(window).mousemove(function (event) {
9 mouseY = event.clientY;
10 mouseX = event.clientX; //这两句主要找到mouse的坐标值
11 dy = mouseY - offset.top;
12 dx = mouseX - offset.left;//确定一下鼠标和div的坐标差值
13 angle = Math.atan2(dy, dx) / Math.PI*180; //arctan算出角度
14 $btn.css({ 'transform': 'rotate(' + angle + 'deg)', '-moz-transform': 'rotate(' + angle + 'deg)' });//利用jQuery减少兼容性的麻烦，并设置样式
15 });
16
17
18 });完整的html如下
1 <html>
2
3 <head>
4 <meta charset='utf8' />
5 <style type='text/css'>
6 * {
7 margin: 0;
8 padding: 0;
9 }
10
11 body {
12 background: lightseagreen;
13 }
14
15 .btn {
16 background: pink;
17 height: 40px;
18 width: 100px;
19 left: 400px;
20 top: 100px;
21 position: absolute;
22 display: inline-block;
23 text-align: center;
24 border-style: solid;
25 border-color: deeppink;
26 /* box-shadow:10px 10px 10px 10px black; */
27 box-sizing: border-box;
28 /* transform: rotate(-45deg); */
29 user-select: none;
30 }
31
32 .btn:hover {
33 background: deeppink;
34 }
35 </style>
36 <script type='text/javascript' src="../jQuery/jquery-1.9.0.min.js"></script>
37 <script type='text/javascript'>
38 $(document).ready(function () {
39 //要button中心得重新计算中心点，目前用左上角
40
41 $btn = $('.btn');
42 var offset = $btn.offset();
43
44
45 $(window).mousemove(function (event) {
46 mouseY = event.clientY;
47 mouseX = event.clientX;
48 dy = mouseY - offset.top;
49 dx = mouseX - offset.left;
50 angle = Math.atan2(dy, dx) / Math.PI*180;
51 $btn.css({ 'transform': 'rotate(' + angle + 'deg)', '-moz-transform': 'rotate(' + angle + 'deg)' });
52 });
53
54
55 });
56 </script>
57 </head>
58
59 <body>
60 <div class='btn'>按一下</div>
61 </body>
62
63 </html>2.div自己转动，和div的变速转动
这部分是我用setInterval自己转动的，不过总得计算，我想如果要想改进的话，应该是用数组存起来360的每一帧的角度，然后在用setInterval循环取就好了。
不过当前没这么些，相信客户端还是能承受的:)
1 $(document).ready(function () {
2
3 //固定速度旋转
4 $btn = $('.btn');
5 var av = 2;//固定的角速度
6 var angle = 0;
7 $btn.css({'transform':'rotate('+angle+'deg)'});
8
9 setInterval(function(){
10 angle+=av; //每帧加上速度
11 if(angle/360==1)
12 angle=0;
13 $btn.css({'transform':'rotate('+angle+'deg)'});
14 },25);
15
16 //变速旋转
17 $btn2 = $('.btn2');
18
19 var av2=0;
20 var ava2=0.3;//设置角度加速度
21 var angle2=0;
22 $btn2.css({'transform':'rotate('+angle2+'deg)'});
23 setInterval(function(){
24 av2+=ava2; //每帧速度,加上角速度的加速度,形成变速
25 angle2+=av2;
26 if(av2>=20||av2<=0) //考虑也不能老加速，太快看不见了,设置一个封顶速度是20,一旦到了上限就开始减速，减到0再加，当然可以设置负数，肯定是又逆向转一下
27 ava2=-ava2;
28 if(angle2/360>1)
29 angle2=0;
30 $btn2.css({'transform':'rotate('+angle2+'deg)'});
31 },20);
32
33 });完整的html
<html>
<head>
<meta charset='utf8' />
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
body {
background: lightseagreen;
}
.btn {
background: pink;
height: 40px;
width: 100px;
left: 400px;
top: 100px;
position: absolute;
display: inline-block;
text-align: center;
border-style: solid;
border-color: deeppink;
box-sizing: border-box;
user-select: none;
}
.btn2 {
background: pink;
height: 40px;
width: 100px;
left: 550px;
top: 100px;
position: absolute;
display: inline-block;
text-align: center;
border-style: solid;
border-color: deeppink;
box-sizing: border-box;
user-select: none;
}
.btn:hover {
background: deeppink;
}
</style>
<script type='text/javascript' src="../jQuery/jquery-1.9.0.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
//先按固定速度旋转
$btn = $('.btn');
var av = 2;
var angle = 0;
$btn.css({'transform':'rotate('+angle+'deg)'});
setInterval(function(){
angle+=av;
if(angle/360==1)
angle=0;
$btn.css({'transform':'rotate('+angle+'deg)'});
},25);//这里设置的帧数为40帧，一开始设置25帧有点卡...
$btn2 = $('.btn2');
var av2=0;
var ava2=0.3;
var angle2=0;
$btn2.css({'transform':'rotate('+angle2+'deg)'});
setInterval(function(){
av2+=ava2;
angle2+=av2;
if(av2>=20||av2<=0)
ava2=-ava2;
if(angle2/360>1)
angle2=0;
$btn2.css({'transform':'rotate('+angle2+'deg)'});
},20); //设置的50帧，变速么，流畅点，不知道理解对不对
});
</script>
</head>
<body>
<div class='btn'></div>
<div class='btn2'></div>
</body>
</html>