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网卡驱动框架及制作虚拟网卡

    1.概述 网卡驱动与硬件相关,主要负责收发网络的数据包,将上层协议传递下来的数据包以特定的媒介访问控制方式进行发送,并将接收到的数据包传递给上层协议. 网卡设备与字符设备,块设备不同,网络设备驱动程序 ...

  2. lastlog---显示系统中所有用户最近一次登录信息。

    lastlog命令用于显示系统中所有用户最近一次登录信息. lastlog文件在每次有用户登录时被查询.可以使用lastlog命令检查某特定用户上次登录的时间,并格式化输出上次登录日志/var/log ...

  3. PatentTips - Enhancing the usability of virtual machines

    BACKGROUND Virtualization technology enables a single host computer running a virtual machine monito ...

  4. Android开源图表库XCL-Charts版本号公布及展示页

    XCL-Charts V2.1 Android开源图表库(XCL-Charts is a free charting library for Android platform.) XCL-Charts ...

  5. 1.3 Quick Start中 Step 4: Send some messages官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 4: Send some messages Step : 发送消息 Kaf ...

  6. BZOJ2716: [Violet 3]天使玩偶(KD-Tree)

    Description Input Output Sample Input 100 100 81 23 27 16 52 58 44 24 25 95 34 2 96 25 8 14 97 50 97 ...

  7. Docker+SVN

    原文:Docker+SVN mkdir /cnex/svndocker pull garethflowers/svn-server docker run -d --name svn-server  - ...

  8. [D3] Draw a basic US d3-geo map

    Install: npm install --save d3 d3-geo topojson Code: import React, {Component} from 'react'; import ...

  9. 《机器学习实战》基于朴素贝叶斯分类算法构建文本分类器的Python实现

    ============================================================================================ <机器学 ...

  10. groupbox里面添加Form

    /// <summary> /// 动态加载dll /// 反射 /// </summary> private void dynamicDll() { string dllNa ...