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. ...
随机推荐
- Activity的生命周期及各生命周期方法的作用
一.Activity的生命周期中各个方法的作用 onCreate(): 做Activity上所需要数据的初始化工作. onStart(): 显示Activity界面,此时用户对界面可见但不可交互. o ...
- 基于VC的声音文件操作(二)
(二)VC的声音操作 操作声音文件,也就是将WAVE文件打开获取其中的声音数据,根据所需要的声音数据处理算法,进行相应的数学运算,然后将结果重新存储与WAVE格式的文件中去:可以使用CFILE类来实现 ...
- php byte数组与字符串转换类
<?php /** * byte数组与字符串转化类 * @author ZT */ class Bytes { /** * 转换一个string字符串为byte数组 * @param $str ...
- Robberies(HDU2955):01背包+概率转换问题(思维转换)
Robberies HDU2955 因为题目涉及求浮点数的计算:则不能从正面使用01背包求解... 为了能够使用01背包!从唯一的整数(抢到的钱下手)... 之后就是概率的问题: 题目只是给出被抓的 ...
- Heartbeat的两个小BUG
1,heartbeat启动不起来 如果你是用了linux-ha.japan里面的repo文件,Yum安装pacemaker+heartbeat时. 可能会发现打了service heartbeat s ...
- php乱码
1:php 编码是utf-8 但是接口需要是gbk 这么办?? $message = "你的微点管理地址为:".$shortUrl." [请保存信息]"; // ...
- WP8:Unity3D之间的值传递
在前面的讨论中,我们介绍了如何在Unity3D for WP8中使用高于.Net 3.5的第三方库,传送门:http://www.cnblogs.com/zhxilin/p/3311240.html ...
- Net中JSON序列化和反序列化处理(日期时间特殊处理)
0 缘由 笔者最近在web api端使用Json.Net进行序列化处理,而在调用端使用DataContractSerializer进行反序列化,遇到日期时间处理反序列化不成功[备注:笔者使用Net ...
- SONATYPE NEXUS搭建MAVEN私服
1.为什么使用Nexus如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库下载构件无疑加大了仓库的负载和浪费 ...
- C#课外实践——校园二手平台(技术篇1)
前面分享了这次的课外实践的心得,这次,就分享一下从这次的课外实践的过程中学到的知识技能吧.虽然有句话说的好,不要做没有准备的战争,但是,我想说的是,生活中有很多的事情是不允许我们有准备的.遇到事情必须 ...