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. 【项目基础】容器、AOP理论篇

    一.容器(砂锅) 1.概念: 容器是应用server中位于组件和平台之间的接口集合 2.应用: 容器一般位于应用server之内,由应用server负责载入和维护.一个容器仅仅能存在于一个应用serv ...

  2. wordpress 加速主题的静态资源

    wordpress 加速主题的静态资源(固定的CSS.JS和图片等) wordpress 中用函数 get_stylesheet_directory_uri() 生成当前主题的 URL , 格式如 h ...

  3. thinkphp杂项功能（主干）

    thinkphp杂项功能(主干) 一.总结 1.杂项功能:杂项里面我需要有点印象的是五个:缓存,多语言,图像处理,文件处理,单元测试 二.thinkphp杂项功能(主干) thinkphp扩展杂项功能 ...

  4. 【arc062e】Building Cubes with AtCoDeer

    Description STL有n块瓷砖,编号从1到n,并且将这个编号写在瓷砖的正中央: 瓷砖的四个角上分别有四种颜色(可能相等可能不相等),并且用Ci,0,Ci,1,Ci,2,Ci,3分别表示左上. ...

  5. Mysql学习总结（15）——Mysql错误码大全

    B.1. 服务器错误代码和消息 服务器错误信息来自下述源文件: ·         错误消息信息列在share/errmsg.txt文件中."%d"和"%s"分 ...

  6. [Javascript AST] 4. Continue: Report ESLint error

    const disallowedMethods = ["log", "info", "warn", "error", & ...

  7. POJ Oulipo(KMP模板题)

    题意:找出模板在文本串中出现的次数 思路:KMP模板题 #include<cstdio> #include<cstring> #include<cmath> #in ...

  8. 3lession-python编程规范

    今天继续学习python,内容主要就是python编程过程中的一些规范,包括注释.换行等 1.注释 所有的注释都是以#开头,注释可以单独占有一行,也可以放到语句的末尾.因为python没有多行注释,所 ...

  9. code-代码平台服务器路径

    下面记录的是各个平台的服务器路径(va使用) ("repo init -u ssh://vanzo/platform_89/manifest.git") ("repo i ...

  10. Windows Route 路由表命令整理

    Windows Route 路由表命令 在本地 IP 路由表中显示和修改条目. 语法 route [-f] [-p] [Command [Destination] [mask Netmask] [Ga ...