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. halt---关闭正在运行的Linux操作系统。

    halt命令用来关闭正在运行的Linux操作系统.halt命令会先检测系统的runlevel,若runlevel为0或6,则关闭系统,否则即调用shutdown来关闭系统. 语法 halt(选项) 选 ...

  2. WPF通用管理框架 项目客户端基础结构介绍

    介绍 首先, 粗糙的展示一下目前的结构设计理念, 因为这几天一直在忙于工作, 所以跟进有些缓慢, 整体的设计是支持多种服务模式.目前只针对MSSQL做数据库接口, ORM选型则用的是微软的EF(PS: ...

  3. 洛谷——P1498 南蛮图腾

    https://www.luogu.org/problem/show?pid=1498 题目描述 自从到了南蛮之地,孔明不仅把孟获收拾的服服帖帖,而且还发现了不少少数民族的智慧,他发现少数民族的图腾往 ...

  4. RecyclerView下拉刷新和载入很多其它

    之前一直写的是ListVIew下拉刷新,可是好多朋友都说要RecycleView的下拉刷新和滑动载入.事实上,这个原理都是几乎相同.抽出时间,我就写了下RecycleView的下拉刷新和滑动载入很多其 ...

  5. 类似C语言格式化输出

    java se5引入的format方法可以用于PrintStream或PrintWriter对象,format方法模仿自C的printf(), 如果你比较怀旧的话,也可以用printf(). pack ...

  6. 企业部署Linux应用将拥有更低的TCO

    650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...

  7. 基于jQuery的一组图片的滚动

    css: .displayB{display:block;}.fl{float:left;}.fr{float: right;}.posAb{position: absolute;}.posRe{po ...

  8. mobx项目创建 + mobx项目流程代码

    一. 安装mobx 1. react 安装并 reject抽离配置 1. 全局安装 create-react-app 这个脚手架 npm/cnpm i create-react-app -g yarn ...

  9. PHP用socket连接SMTP服务器发送邮件

    PHP用socket连接SMTP服务器发送邮件 PHP用socket连接SMTP服务器发送邮件学习实验记录: 分析与SMTP会话的一般流程 1. HELO XXX \r\n //XXX就是自己起个名字 ...

  10. 5lession-path路径相关操作

    今天开始接触到了文件目录.路径方面的知识点.记录如下 先看代码 #!/usr/bin/python # -*- coding: utf-8 -*- import os import sys curre ...