CSS3之过渡及2D变换
transition过渡
transition-duration:; 运动时间
transition-delay:; 延迟时间
transition-timing-function:; 运动形式
ease 逐渐变慢 (默认)
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier 贝塞尔曲线(x1,y1,x2,y2) 通过控制曲线走势来改变运动效果
注:多样式同时进行过渡(需要异步过渡 则需在完成时间后再加一个参数:延迟时间)
例:transition:1s width,2s 1s height,3s 3s background;
transitionend事件(transition结束后触发的事件)
注意:1.每改变元素一个样式 会触发一次tranasitionend
在webkit内核中写法:
obj.addEventListener('WebkitTransitionEnd',fn,false);
在标准下写法:
obj.addEventListener('transitionend',fn,false);
-transform:; 变换
rotate(30deg) 旋转 围绕元素中心点旋转30度
skewX(45deg) 斜切 沿X轴向左拉伸45度
skewY(45deg) 斜切 沿Y轴向上拉伸45度
综合写法 skew(45deg,45deg)
scaleX(2) 缩放 由中心点沿X轴向外扩展2倍
scaleY(0.5) 缩放 由中心点沿Y轴向内收缩2倍
综合写法 scale(2,0.5)
translateX(100px) 位移 从左往右移动100px
translateY(-100px) 位移 从下往上移动100px
综合写法 translate(100px,-100px)
注:transform 执行顺序 -- 后写先执行!
例:-webkit-transform:translateX(100px) scale(0.5); 与 -webkit-transform:scale(0.5) translateX(100px);
第一条样式先缩放0.5倍 再执行位移100px
第二条样式先执行平移100px 再缩放0.5倍 这时100px会随着缩放被缩放成50px
-transform-origin:; 变换基点
其值可为像素也可为关键字
-transform:matrix(); 矩阵
旋转 位移 缩放 斜切 都是通过matrix封装实现
matrix(1,0,0,1,0,0) 标准下 默认6个参数
(
matrix(a,b,c,d,e,f);
缩放
a,c,e表示X轴缩放 X轴缩放:a:a*缩放倍数 c:c*缩放倍数 e:e*缩放倍数 (e/c默认为0);
b,d,f表示Y轴缩放 Y轴缩放:b:b*缩放倍数 d:d*缩放倍数 f:f*缩放倍数 (f/d默认为0);
斜切
c同时表示X轴斜切 c=Math.tan(Deg/180*Math*PI)
b同时表示Y轴斜切 b=Math.tan(Deg/180*Math*PI)
位移
e:X轴的位移 位移的长度e+x;(e,f默认值为0)
f:Y轴的位移 位移的长度f+y;
旋转
a/b/c/d共同控制旋转
a = Math.cos(deg/180*Math*PI)
b = Math.sin(deg/180*Math*PI)
c = -Math.sin(deg/180*Math*PI)
d = Math.cos(deg/180*Math*PI)
)
兼容IE6及以上 缺少位移2个参数
progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
Matrix( M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');
(
注意 IE下旋转不是围绕元素中心点旋转
解决方案:控制元素left/top;
left = (父级offsetWidth-本身offsetWidth)/2
top = (父级offsetHeight-本身offsetHeight)/2
)
CSS3之过渡及2D变换的更多相关文章
- css3 过渡和2d变换——回顾
1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...
- 牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...
- css3的transform ,2D变换
transformtransform的中文翻译就是变换,改变,改观,转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变. 他的属性(变换方式)有:平移,旋转,缩放,扭曲transla ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- CSS3 2D 变换
CSS2D transform 表示2D变换,目前获得了各主流浏览器的支持,是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,可以取代大量之前只能靠Flash才 ...
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- css3的3D和2D
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...
- CSS3的过渡和转换
CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...
随机推荐
- android手机登录时遇到“QQ安全登录发现病毒”解决
android手机作为开源系统非常容易感染病毒,有时候我们会经常遇到手机QQ登录时检测到app被感染,一般情况是由手机感染病毒所引起的,安装腾讯管家后只能检测病毒和卸载感染病毒的软件,不能清除病毒.解 ...
- MongoDB学习笔记五—查询上
数据准备 { , "goods_name" : "KD876", "createTime" : ISODate("2016-12- ...
- 【原】关于Python中setuptools安装的问题
在生成package的时候,需要在setup.py中引入setuptools包,可是却报告如下错误: ImportError: No module named setuptools 解决办法就是下载s ...
- kqueue例子
网络服务器通常都使用epoll进行异步IO处理,而开发者通常使用mac,为了方便开发,我把自己的handy库移植到了mac平台上.移植过程中,网上居然没有搜到kqueue的使用例子,让我惊讶不已.为了 ...
- salesforce 零基础学习(五十八)通过sObject的field返回其对应的基础类型
项目中有时候会要求通过sObject的Field的type类型返回其对应的基本类型,然后对其进行相关的处理,创建sObject的field可以选择的type类型是固定多的. 上述类型可以转换成几种基本 ...
- Spring学习记录(十四)---JDBC基本操作
先看一些定义: 在Spring JDBC模块中,所有的类可以被分到四个单独的包:1.core即核心包,它包含了JDBC的核心功能.此包内有很多重要的类,包括:JdbcTemplate类.SimpleJ ...
- 6.LibSVM核函数
libsvm的核函数类型(svmtrain.c注释部分): "-t kernel_type : set type of kernel function (default 2)\n" ...
- 前端学HTTP之基本认证
前面的话 人们用Web进行私人事务处理,访问私有的数据.通过Web可以很方便地访问这些信息,但仅仅是方便访问还是不够的.我们要保证只有特定的人能看到我们的敏感信息并且能够执行我们的特权事务 服务器需要 ...
- AngularJS Resource:与 RESTful API 交互
REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅 ...
- Python:认识模块
一.了解 Python 模块: -- 什么是函数: 函数是实现一项或多项功能的一段程序 模块是实现一类功能的程序块,是包含函数和其他语句的脚本文件,以".py"为后缀名 默认,C: ...