CSS3学习笔记--transform中的Matrix(矩阵)
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(矩阵)的更多相关文章
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- css3 transform中的matrix矩阵
CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...
- CSS3学习笔记--transform基于原始数据(旋转木马实例)
参考链接:好吧,CSS3 3D transform变换,不过如此! transform-style:preserve-3d属性要在图片所在的容器(父元素)中定义,perspective定义在父子元素上 ...
- Android学习笔记进阶八之Matrix矩阵
Matrix,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 在Android里面,Matrix由9个float值构成,是一个3*3的矩阵.最好记住.如下图: ...
- CSS3 学习笔记(中)
七.文档流 文档流(normal flow)--网页的基础(最底下的一层),我们所创建的元素默认都是在文档流中进行排列. 对于元素有两个状态:在文档流 或 脱离文档流. 元素在文档流的特点: 块元素: ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- ArcGIS案例学习笔记-点集中最近点对和最远点对
ArcGIS案例学习笔记-点集中最近点对和最远点对 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:对于点图层,查找最近的点对和最远的点对 数据: 方法: 1. ...
随机推荐
- 5.18-5.22js调制样式
这次主要是通过改变列表的浮动值来实现点击跳动效果,因为是点击列表的的每一个li都可跳动整个列表,所以是双for循环,第一个是控制点击事件,第二个是循环改变每个li的flot值.另外要改变每次点击后的点 ...
- [C++]项目中的代码注释规范(整理)
原文:http://blog.csdn.net/pleasecallmewhy/article/details/8658795 1 源文件头部注释 列出:版权.作者.编写日期和描述. 每行不要超过80 ...
- hadoop部署中遇到ssh设置的问题
尽管hadoop和一些培训视频课程上讲分布式部署比较详细,但是在部署时仍遇到了一些小问题,在此mark一下: 1.linux的namenode主机上安装了ssh,也启动了ssh,并且执行了: /etc ...
- 【NetDIY智能主控】开发计划
经过一个轮回,硬件开发.硬件创业又被推到了历史的前台. 面向低端.初级的硬件爱好者,以Arduino和81单片开发板为核心的开源硬件越来越深入人心,参与的人群越来越多,相关硬件和周边模块也越来越便宜. ...
- Dynamic CRM 2013学习笔记(二)插件基本用法及调试
插件是可与 Microsoft Dynamics CRM 2013 和 Microsoft Dynamics CRM Online 集成的自定义业务逻辑(代码),用于修改或增加平台的标准行为.也可 ...
- node-webkit教程(14)禁用缓存
1.在开发者工具中禁用缓存 上面这张图,是在node-webkit 中 在开发工具中配置禁用缓存的选项. 使用这个选项可以有效的禁用所有页面缓存. 2. 在配置文件中,配置webkit 缓存禁用和启用 ...
- SublimeText2 快捷键一览
ctrl+shift+w: 关闭Sublime,关闭所有打开文件ctrl+n: 新建文件ctrl+s: 保存ctrl+shift+s: 另存为ctrl+f4: 关闭文件ctrl+w: 关闭f11: 切 ...
- fgets函数执行完成后,文件指针如何移动?
用fgets执行之后,读取了文件中的一行,这时文件位置指针是自动指向文件的下一行的开头吗,还是指向当前行的结尾?如果一行的字符串没读取完会怎样? 实例结果: 如果一行的字符串没读取完会,下一次会接着上 ...
- docker学习笔记一:基本安装和设置容器静态ip
docker是一个lxc升级版的容器类虚拟环境,具有快速部署,灵活,易迁移的虚拟机模式,现在各大公司已经开始广泛使用为了自己方便学习linux,需要多台虚拟机环境,但是vmware开启多台虚拟机时需要 ...
- 菜鸟学习WCF笔记-契约(Contract)
契约,契约确保了服务的正常调用,客户端以契约的方式进行服务端调用,而服务则需要按照契约规定的方式提供服务. 契约是服务提供的一组操作的描述 功能上讲:每个操作对应着某个具体的功能实现,以及调用这个操作 ...