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. python2 python3 m2crypto 安装（rsa 私钥文件加密）

    转自作者:大道至简_Andy 原文链接:https://www.jianshu.com/p/b308357ef649 第一种方式:使用apt-get(以Python2版本进行测试的) sudo apt ...

  2. Android中级第九讲--相机调焦

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 相机调焦:原理,使用竖直seekbar,根据用户拖拉来获得距离 ...

  3. 给指定的用户无需密码执行 sudo 的权限

    给指定的用户无需密码执行 sudo 的权限 cat /etc/passwd 可以查看所有用户的列表 w 可以查看当前活跃的用户列表 cat /etc/group 查看用户组 cat /etc/pass ...

  4. jquery init 关系

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st ...

  5. js29--装饰着模式

    //装饰者模式:就是在保证不改变原有对象的基础上,去扩展一些想要的方法或去求 var CarInterface = new BH.Interface('CarInterface' , ['getPri ...

  6. [51Nod]NOIP2018提高组省一冲奖班模测训练（二）

    http://www.51nod.com/contest/problemList.html#!contestId=73&randomCode=4408520896354389006 还是原题大 ...

  7. thinkphp事务处理以及无效时的解决方案（整理）

    thinkphp事务处理以及无效时的解决方案(整理) 一.总结 一句话总结:要程序里面支持事务,首先连接的数据库和数据表必须支持事务 mysql 1.InnoDB和MyISAM对事务的支持怎么样? I ...

  8. 洛谷—— P1080 国王游戏

    https://www.luogu.org/problem/show?pid=1080 题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整 ...

  9. silverlight依据json字符串动态创建实体类

    1.接收json字符串: //用JsonValue转换json字符串是为了之后获得json字符串的每行数据和每一列的列名 JsonValue jv = JsonValue.Parse(json);   ...

  10. 简单的横向ListView实现(version 4.0)

    这个版本号的博客写起来颇费口舌.有些代码自己语言组织能力有限,感觉描写叙述起来非常费劲,前前后后改了五六遍稿子还是不尽人意 ,只是我还是坚持写出来自己当初的思路,假设看得不明确的地方我在文章最后仍然会 ...