如何实现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()
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>
