关于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)

转载自:chun6.html

时间: 2024-11-03 03:42:22

关于CSS3的小知识点之2D变换的相关文章

css3 过渡和2d变换——回顾

1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css 属性名称 语法: transition-property: none | all | property none 没有属性会获得过度效果 all 所有属性都将获得过度效果. property 定义应用过度效果css 属性名称列表,列表以逗号分割. indent 元素属性名称 transition-d

CSS3相关实用知识点

本文讲解CSS3相关实用知识点 CSS3相关实用知识点目录 边框设置 颜色设置 背景设置 渐变使用 超出文本设置 阴影设置 CSS3变换设置 过渡设置 动画设置 多列布局 BoxSizing设置 弹性布局 滤镜函数 媒体查询 resize元素 outline偏移 其他的@规则使用 边框 边框圆角 border-radius: 10px; 边框图片设置 border: 20px solid transparent; border-image: url(./2.jpg) 7 31 round; 颜色

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

记录神经网络中一些小知识点

记录神经网络中一些小知识点 1 Caffe中的blob维度 Caffe中的blob具有4个维度,分别是num,channel,width和height: 其中我们在定义各个网络层时,常用到的一个参数numout,就是指定的channel: 比如说,维度为1*3*5*5的数据输入网络(即每次输入一张5*5大小的3通道图),经过一个stride为2,pad为1,kernel为2,numout为2的卷积层后,维度就变成了1*2*3*3: 假如输入有n个通道,计算时,caffe就会对应产生n个filte

C++ 小知识点 WINAPI

int WINAPI WINMain 中,WINAPI含义 网友给出回答:在windef.h头文件中有如下定义#define WINAPI      __stdcall#define APIENTRY    WINAPIVC有两种函数调用方式 一种是__stdcall,另一种是__cdecl函数的调用方式有两种一种是PASCAL调用方式,另一种是C调用方式使用PASCAL调用方式,函数在返回到调用者之前将参数从栈中删除使用C调用方式,参数的删除是调用者完成的WinMain函数是由系统调用的,Wi

0607am抽象类&amp;接口&amp;析构方法&amp;tostring&amp;小知识点

/*class ren{ public static $color;//静态 static function () { ren::$color; self::$color;//self只能写在类里面,代表这分类 }} */ //不能实例化的类:抽象类abstract class Animal //关键字abstract{ public $dong; public $jiao; function chi() { } function shui() { }}class Ren extends Ani

初学MySQL中的一些小知识点

写在前面,小弟初用博客记录学习路上的一点点小知识点,其中可能有个人理解方面的误差,或不明白的地方.希望各位大牛纠正指导,小弟感激不尽!这并不是什么帮助别人解决问题的文章,只是小弟将学习到的内容一一写在博客上,这样方便以后复习,还恳请大家勿喷.. 一.进入MySQL客户端 1.客户端可以通过.../MySQL/bin目录下的sql.exe运行客户端. 1.1:访问方式一: -u root -p /*可以直接在这段代码的后面添加密码,也可以按回车后再输入密码*/ 1.1:访问方式二: --host

私人定制javascript中数组小知识点(Only For Me)

先上笑话,1.刚看到一个游泳的,想起公司组织去三亚旅游,老板跳海里,各种挣扎,捞上来老板第一句话:我记得我会游泳的啊. 2.媳妇说:老公对不起,我把你新买的自行车撞散架了! 老公:没事宝贝,你若安好,便是晴天! 媳妇说:老公你太有诗意了. 老公:滚犊子,安不好我整死你! 数组的概念 javascript数组是值得有序集合,不过它实属一个javascript对象的特殊形式,这是一个很重点的定性. 创建数组 1.var a=new Array();//等同于[] 2.var a=new Array(

js中关于value的一个小知识点(value既是属性也是变量)

今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况,是常见的情况,会弹出“测试内容” <input type="button" value="测试内容" onclick = "alert(value)"> [2]心想,这种情况下value找不到,作用域链应该到document了,应该弹出“123",但情况是弹出空 <script> var value=123; &l