css3-11 如何实现2D动画
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、相关知识
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动画的更多相关文章
- 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- 2D动画的制作
通过css3的transform transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: sca ...
- 高大上网站-CSS3总结1-图片2D处理以及BUG修复
高大上网站-CSS3总结1-图片2D处理以及BUG修复 一,前言: 现在的前端UI相对JS来说,重视并不够. 但是CSS3提供的新特性,将现在的网站赤裸裸的划分为两类:一类还在写着老旧样式,或者通过b ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
- 一款基于css3和jquery实现的动画弹出层
今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...
- css 2D动画
2D动画: 通过 CSS3 transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动. ...
- CSS3中的过渡、动画和变换
一.过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...
- 实用CSS3的transform实现多种动画效果
查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...
- css3很美的蟠桃动画
查看效果:http://hovertree.com/texiao/css3/26/ 源码下载:http://hovertree.com/h/bjaf/ndhxgfkn.htm 效果图如下: 代码如下: ...
随机推荐
- x264代码剖析（八）：encode()函数之x264_encoder_close()函数
x264代码剖析(八):encode()函数之x264_encoder_close()函数 encode()函数是x264的主干函数.主要包含x264_encoder_open()函数.x264_en ...
- Android网络通信Volley框架源代码浅析（一）
尊重原创http://blog.csdn.net/yuanzeyao/article/details/25837897 从今天開始,我打算为大家呈现关于Volley框架的源代码分析的文章,Volley ...
- 怎样在nat方式的虚拟机下做ssh连接
很多人在本机做測试都是用桥接的方式让虚拟机上网. 假设ip地址紧张或者根本就不同意我们拥有一个局域网的ip.这时候便能够使用NAT方式+putty来远程操作. 第一步,打开设备-Network-更改网 ...
- 关于bcg库记忆界面的问题及其解决办法
作者:朱金灿 来源:http://blog.csdn.net/clever101 今天同事向我请教一个问题,说他使用BCG创建了一个停靠栏,之后把代码注释了,但是程序启动时总出现一个Debug Ass ...
- Linux平台下使用AdventNet ManageEngine OpUtils监控网络
AdventNet ManageEngine OpUtils 是一套系统和网络监视工具,它有Linux/Windows系统平台的免费版和企业版,该软件是一款用于监视诸如路由器,交换机,服务器或者桌面这 ...
- C#解决关闭多线程的form主窗体时抛出ObjectDisposedException 异常
一.现象: 我在主窗体新建线程,使用子线程来处理接收到的数据,并且更新窗体显示内容,但关闭主窗体程序之后就程序就报错,如下所示: 二.分析问题: 由于新建线程的处理函数里边是一直死循环处理数据,虽然窗 ...
- ArcEngine的ToolbarControl解析
转自Love Lyre原文 ArcEngine的ToolbarControl解析 ToolbarControlClass有三个主要的接口: IToolbarControl, IToolbarContr ...
- Android RingtoneManager 铃声管理
package com.Aina.Android; import java.io.File; import android.app.Activity; import android.content.I ...
- JavaScript原型及原型链
代码一: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- Spring HandlerInterceptor的使用
http://blog.csdn.net/joeyon1985/article/details/49903761