微信扫一扫打赏支持

css3-11 如何实现2D动画

css3-11 如何实现2D动画

一、总结

一句话总结：就是transform属性，属性值为1.translate()    2.rotate()    3.scale()，而这是哪个属性值是带参数的。

 

1、transform：translate和相对定位relative的不同？

没旋转的时候是一模一样，都是占据文档流，然后移动

但是，一旦旋转，transform：translate是以图片旋转后为直接坐标系来动，

而相对定位relative还是以浏览器窗口做移动的直角坐标系

 

2、图片旋转后，关于图片的位移操作的直接坐标系还是浏览器窗口么？

不是

旋转发生，图片的坐标轴不认浏览器，只认图片的

 

3、如何实现图片对角线移动（或朝某个角度移动）？

旋转，然后移动（translate）

 

4、动画的关键词是什么，属性值中的移动和旋转的关键词又是什么？

transform

1.translate()
2.rotate()
3.scale()

 

5、如何实现元素的移动或者旋转？

2             transform:translate(300px,300px);
16             transform:rotate(20deg);

 

6、如何让超出div的图片隐藏？

17             overflow:hidden;

 

7、二维动画的属性值（平移和旋转）的移动参数分别是什么？

用脑子想，而不是用脑子记

2             transform:translate(300px,300px);
16             transform:rotate(20deg);

 

8、jquery中如何设置定时事件？

和在js一样

setInterval一个参数是匿名函数，一个参数是时间

33     setInterval(function(){
34         s+=v;
35         obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'});
36     },10);

 

 

二、如何实现2D动画

1、相关知识

2D样式:
1.translate()
2.rotate()
3.scale()

 

2、代码

translate相对移动

1         div{
2             transform:translate(300px,300px);
3         }

translate和rotate实现2D旋转

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9             margin:0px;
10         }
11         
12         div{
13             width:256px;
14             height:256px;
15             background: #ccc;
16             transform:rotate(20deg);
17             overflow:hidden;
18         }    
19 
20     </style>
21     <script src='jquery.min.js'></script>
22 </head>
23 <body>
24     <div>
25         <img src="dog.png" alt="">    
26     </div>
27 </body>
28 <script>
29 $('div').click(function(){
30     s=0;
31     v=10;
32     obj=$(this);
33     setInterval(function(){
34         s+=v;
35         obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'});
36     },10);
37 });    
38 </script>
39 </html>

rotate实现2D自动旋转

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9             margin:0px;
10         }
11         
12         div{
13             width:256px;
14             height:256px;
15             background: #ccc;
16             overflow:hidden;
17             border-radius:256px;
18         }    
19 
20     </style>
21     <script src='jquery.min.js'></script>
22 </head>
23 <body>
24     <div>
25         <img src="dog.png" alt="">    
26     </div>
27 </body>
28 <script>
29 $('div').click(function(){
30     s=0;
31     v=-10;
32     obj=$(this);
33     setInterval(function(){
34         s+=v;
35         obj.css({'transform':'rotate('+s+'deg)'});
36     },10);
37 });    
38 </script>
39 </html>

 

 

 
posted @ 2018-07-04 13:40  范仁义  阅读(514)  评论(0)  编辑  收藏  举报