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. OpenGL(四)——有用的函数

    概述 1. reshape 定义窗口和图像的映射关系,使在不以纵横比4:3调整窗口大小时,图像不会失真 函数 1. ReShape 如果变更后的窗体的横纵比大于4/3,需要以高为基数,宽为高*4/3, ...

  2. 【Python自动化运维之路Day9】Socket

    socket也可以认为是套接字是一种源IP地址和目的IP地址以及源端口号和目的端口号的组合.网络化的应用程序在开始任何通讯之前都必须要创建套接字.就像电话的插口一样,没有它就没办法通讯. socket ...

  3. 使用 sqlcmd 运行 Transact-SQL 脚本文件

    在数据恢复时遇到问题:bat文件批处理的指导文档 https://msdn.microsoft.com/zh-cn/library/ms170572%28v=sql.120%29.aspx

  4. C#设计模式(7)——适配器模式(Adapter Pattern)

    一.引言 在实际的开发过程中,由于应用环境的变化(例如使用语言的变化),我们需要的实现在新的环境中没有现存对象可以满足,但是其他环境却存在这样现存的对象.那么如果将“将现存的对象”在新的环境中进行调用 ...

  5. Failed to initialize the Common Language Runtime

    今天在SQL Server 2008中执行存储过程的时候报以下错误: Msg , Level , State , Procedure usp_QueryRealTimeRoomInfo, Line F ...

  6. [ACM_其他] Modular Inverse [a关于模m的逆 模线性方程]

    Description The modular modular multiplicative inverse of an integer a modulo m is an integer x such ...

  7. CLIQUE 聚类算法以及Java实现+多线程

    CLIQUE(Clustering In QUEst)是一种简单的基于网格的聚类方法,用于发现子空间中基于密度的簇.CLIQUE把每个维划分成不重叠的区间,从而把数据对象的整个嵌入空间划分成单元.它使 ...

  8. 解决Eclipse Debug source not found问题

    解决方法如下:Debug 视图下-->在调试的线程上 右键单击-->选择Edit Source Lookup Path-->选择Add-->选择Java Project选择相应 ...

  9. 教你轻松看懂 iOS9 新功能

    2015苹果全球开发者大会在6月9日凌晨,美国旧金山举行,fir.im 整理了一部分的资料,帮助了解 iOS9 的新特性与功能,感兴趣的可以看下. 关于iOS9新增功能 在WWDC 2015上苹果介绍 ...

  10. 【关于新版Cocos2dx/Cocos2d-JS】安装包和使用方式的变化

    最近有读者反馈说,最新的Cocos2dx或者说2d-JS下载之后跟书本说的安装方式相差很大. 刚下载最新版3.9试了一下,其实用法还是没有变的. 新版把cocos2dx和cocos2d-js合并了,这 ...