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相对移动

         div{

             transform:translate(300px,300px);

         }

translate和rotate实现2D旋转

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

         }

         div{

             width:256px;

             height:256px;

             background: #ccc;

             transform:rotate(20deg);

             overflow:hidden;

         }    

     </style>

     <script src='jquery.min.js'></script>

 </head>

 <body>

     <div>

         <img src="dog.png" alt="">

     </div>

 </body>

 <script>

 $('div').click(function(){

     s=0;

     v=10;

     obj=$(this);

     setInterval(function(){

         s+=v;

         obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'});

     },10);

 });

 </script>

 </html>

rotate实现2D自动旋转

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

         }

         div{

             width:256px;

             height:256px;

             background: #ccc;

             overflow:hidden;

             border-radius:256px;

         }    

     </style>

     <script src='jquery.min.js'></script>

 </head>

 <body>

     <div>

         <img src="dog.png" alt="">

     </div>

 </body>

 <script>

 $('div').click(function(){

     s=0;

     v=-10;

     obj=$(this);

     setInterval(function(){

         s+=v;

         obj.css({'transform':'rotate('+s+'deg)'});

     },10);

 });

 </script>

 </html>
 

css3-11 如何实现2D动画的更多相关文章

  1. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  2. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  3. 2D动画的制作

    通过css3的transform  transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: sca ...

  4. 高大上网站-CSS3总结1-图片2D处理以及BUG修复

    高大上网站-CSS3总结1-图片2D处理以及BUG修复 一,前言: 现在的前端UI相对JS来说,重视并不够. 但是CSS3提供的新特性,将现在的网站赤裸裸的划分为两类:一类还在写着老旧样式,或者通过b ...

  5. 一款纯css3实现的超炫动画背画特效

    之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览  ...

  6. 一款基于css3和jquery实现的动画弹出层

    今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...

  7. css 2D动画

    2D动画: 通过 CSS3  transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动. ...

  8. CSS3中的过渡、动画和变换

    一.过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...

  9. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  10. css3很美的蟠桃动画

    查看效果:http://hovertree.com/texiao/css3/26/ 源码下载:http://hovertree.com/h/bjaf/ndhxgfkn.htm 效果图如下: 代码如下: ...

随机推荐

  1. Linux-swap分区

    Linux内核为了提高读写效率与速度,会将文件在内存中进行缓存,这部分内存就是Cache Memory(缓存内存).即使你的程序运行结束后, Cache Memory也不会自动释放.这就会导致你在Li ...

  2. 使用spring-boot 国际化配置所碰到的乱码问题

    写好html静态页面 ,  也加上了编码格式 , 获取国际化展示在浏览器中还是存在乱码 , 开始以为是浏览器编码格式问题 , 做过处理后任没有得到解决 , 具体的处理方案如下: <meta ht ...

  3. ActiveMQ学习总结（7）——ActiveMQ使用场景

    MQ简介: MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据(消息)来通信,而无需专用连接来链接它们.消息传 ...

  4. JNDI学习总结（3）——Tomcat下使用C3P0配置JNDI数据源

    一.C3P0下载 C3P0下载地址:http://sourceforge.net/projects/c3p0/files/?source=navbar 下载完成之后得到一个压缩包. 二.使用C3P0配 ...

  5. 利用hibernateTemplate进行最简单的分页

    安全的方法例如以下.别用Session s=getSession()........ /**  * 使用hql 语句进行操作  * @param hql HSQL 查询语句  * @param off ...

  6. php中类文件名的命名的规则是什么

    php中类文件名的命名的规则是什么 一.总结 一句话总结:类库文件(工具类)类文件都是以.class.php为后缀. 1.类的方法和属性的命名规则是怎样的? 都是小驼峰法 方法的命名使用驼峰法,并且首 ...

  7. Android 用Socket实现PC和手机的文件传输

    PC服务器端代码: /* * PC与<a href="http://lib.csdn.net/base/android" class='replace_word' title ...

  8. 【2017"百度之星"程序设计大赛 - 初赛（A）】数据分割

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6109 [题意] 在这里写题意 [题解] 要处理的关系越多,肯定就越容易错. ->单调性. 根据这个 ...

  9. mySQL函数根据经纬度计算两点距离 复制代码

    http://www.cnblogs.com/lujiulong/p/6185041.html https://my.oschina.net/u/2273085/blog/505172?p={{pag ...

  10. 腾讯2016实习生面试经验（已经拿到offer)

      忐忑了好几天,今天最终收到深圳总部的电话.允许录用我为2016年实习生,感觉整个天空都放晴了.坐标:武汉大学,给大家说说我的面试经历吧,我投的是软件开发--应用开发方向. 一.校招流程 投递简历- ...