您的位置：首页 > Web前端 > CSS

利用css3实现div的旋转

2017-11-23 19:42 561 查看
公司项目比较老，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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航