公司项目比较老，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 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;
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;
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>