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()
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>