transform: matrix(a,b,c,d,e,f) ,如下图矩阵所示,任意点(x,y,1)经过matrix变化为(ax+cy+e,bx+dy+f,1),由此可以知道,
matrix参数与translate/scale/skew/rotate函数参数的对应关系为:
translate(tx,ty) matrix(1,0,0,1,tx,ty)
scale(sx,sy) matrix(sx,0,0,sy,0,0)
skew(sx,sy) matrix(1,tansy,tansx,1,0,0)
rotate(rx) matrix(cosrx,sinrx,-sinrx,cosrx,0,0)
 
 
 

aaarticlea/png;base64,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" alt="" />

CSS3学习笔记--transform中的Matrix(矩阵)的更多相关文章

  1. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  2. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  3. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  4. css3 transform中的matrix矩阵

    CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...

  5. CSS3学习笔记--transform基于原始数据(旋转木马实例)

    参考链接:好吧,CSS3 3D transform变换,不过如此! transform-style:preserve-3d属性要在图片所在的容器(父元素)中定义,perspective定义在父子元素上 ...

  6. Android学习笔记进阶八之Matrix矩阵

    Matrix,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 在Android里面,Matrix由9个float值构成,是一个3*3的矩阵.最好记住.如下图: ...

  7. CSS3 学习笔记(中)

    七.文档流 文档流(normal flow)--网页的基础(最底下的一层),我们所创建的元素默认都是在文档流中进行排列. 对于元素有两个状态:在文档流 或 脱离文档流. 元素在文档流的特点: 块元素: ...

  8. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  9. ArcGIS案例学习笔记-点集中最近点对和最远点对

    ArcGIS案例学习笔记-点集中最近点对和最远点对 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:对于点图层,查找最近的点对和最远的点对 数据: 方法: 1. ...

随机推荐

  1. 5.18-5.22js调制样式

    这次主要是通过改变列表的浮动值来实现点击跳动效果,因为是点击列表的的每一个li都可跳动整个列表,所以是双for循环,第一个是控制点击事件,第二个是循环改变每个li的flot值.另外要改变每次点击后的点 ...

  2. HDU-3548-Enumerate the Triangles

    求由所有的点组成的三角形中周长最小的三角形的周长 1.将所有的点按横坐标大小排序 2.从第一个点开始往后枚举,判断能否组成三角形,判断当前三角形周长是否小于已经得到的最小周长 代码如下: #inclu ...

  3. Python成长笔记 - 基础篇 (三)python列表元组、字典、集合

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码   一.列表和元组的操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义 ...

  4. poj 3635/hdu 1676 Full Tank? 车辆加油+最短路

    http://acm.hdu.edu.cn/showproblem.php?pid=1676 给出一张图,n<=1000,m<=10000. 有一辆车想从图的一个地方到达另外一个地方,每个 ...

  5. spring jpa @Query中使用in

    @Modifying @Query("delete from SmTenant s where s.id in ?1") void deleteByIds(List<Long ...

  6. C#学习之Linq to Xml

    前言 我相信很多从事.NET开发的,在.NET 3.5之前操作XML会比较麻烦,但是在此之后出现了Linq to Xml,而今天的主人公就是Linq to Xml,废话不多说,直接进入主题. 题外:最 ...

  7. Windows2003 架设VPN服务

    一.确保Windows防火墙关闭. 在我的电脑上右键=>管理,在左边窗口找到“服务和应用程序”,展开,单击“服务”,在右边窗口中找到“Windows Firewall/Internet Conn ...

  8. p4 是否能自动merge

      总结: 1)如果在copy merge(-at)/auto merge(-am)后修改source branch,则可以自动被copy merge: 2)如果在manual merge后修改sou ...

  9. 喜迎2015年新年:坦克大战(Robocode)游戏编程比赛图文总结

    2015春节前,葡萄城的软件工程师以特有的方式来迎接新年——2015新年编程邀请赛. 邀请赛的初衷,是和大家一起,寻找编程最初的单纯的快乐.       在代码的世界里,添加动力,继续远航.      ...

  10. C#与数据库访问技术总结(十一)之数据阅读器(DataReader)1

    数据阅读器 当执行返回结果集的命令时,需要一个方法从结果集中提取数据. 处理结果集的方法有两个: 第一,使用数据阅读器(DataReader): 第二,同时使用数据适配器(Data Adapter)和 ...