css3中的transform让我们操作变形变得很简单，诸如，translate–移动，scale–缩放，rotate–旋转，skew–斜切。这几个属性很方便，也很简单，但是其中matrix我们就不常使用了吧。-webkit-transform: matrix(1, 0, 0, 1, 100, 100)看到这样一句css，你也许很讨厌怎么一堆的数字，你也许斜视matrix–css也能搞出这货？这篇文章我们一起探讨一下transform中的matrix。

一、初识matrix

2d matrix提供6个参数啊a,b,c,d,d,e,f其基本写法如下：

回顾一下高中数学，或者线性代数，即可知道matrix计算方法。x和y是元素初始的坐标，x’ 和y’则是通过矩阵变换后得到新的坐标。通过中间的那个3×3的变换矩阵，对原先的坐标施加变换，就能得到新的坐标了。依据矩阵变换规则即可得到： x’=ax+cy+e

y’=bx+dy+f。

transform中translate，scale，rotate，skew背后实现原理也对应着matrix变化，下边依次解释：

变换矩阵公式可参考变换矩阵wiki(http://zh.wikipedia.org/zh-cn/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5)

二、移动translate

移动matrix参数为：matrix(1,0,0,1,Δx,Δy)(Δx,Δy分别对应x和y轴的增量)。由此公式可知：

-webkit-transform: translate(100px,100px);即对应着-webkit-transform: matrix(1, 0, 0, 1, 100, 100);

推算出： x’ = 1*x+0 * y+100 = x+100， y’ = 0 * x+1 * y+100 = y+100。

三、缩放scale

缩放matrix参数为：matrix(kx*x,0,0,ky*y,0,0)(kx，和ky分别对应x和y轴缩放比率)。由此公式可知：

-webkit-transform: scale(1.5,1.5);及对应着 -webkit-transform: matrix(1.5, 0, 0, 1.5, 0, 0);

推算出： x’ = 1.5*x+0 * y+0 = 1.5 * x， y’ = 0 * x+1.5 * y+0 =1.5 * y。

四、旋转rotate

旋转matrix参数为：matrix(cosθ,sinθ,-sinθ,cosθ,0,0)，由此可知

-webkit-transform: rotate(45deg);即对应着 -webkit-transform: matrix(0.53, 0.85, -0.85, 0.53, 0, 0);

(sin(45′)=0.85，cos(45′)=0.53)

推算： x’ = x*cos(45′)-y*sin(45′)+0 = x*cos(45′)-y*sin(45′)，y’ = x*sin(45′)+y*cos(45′)+0 = x*sin(45′)+y*cos(45′)

五、斜切skew

斜切matrix参数为matrix(1,tan(θy),tan(θx),1,0,0)，由此可知

-webkit-transform: skew(45deg);即对应着 -webkit-transform: matrix(1,0,1,1,0,0);

(tan(45′)=1)

推算出 x’ = x+y*tan( 45′ )+0 = x+y*tan( 45′ )，y’ = x*tan( 45′ )+y+0 = x*tan( 45′)+y

六、镜相对称

镜像对称没有相应的简化操作。终于有一个只能用matrix实现得了。。。

假设对称轴为y=kx直线，那么以这条直线对称的图形matrix为

matrix(2*ux^2-1,2*ux*uy,2*ux*uy,2*uy^2-1,0,0)

求解过程为：

假设(ux,uy)为直线方向的单位向量。也就是说，如果直线方程是y=kx，那么ux=1/sqrt(1+k^2)，uy=k/sqrt(1+k^2)，

推算出： x’ = (2*ux^2-1)*x+2*ux*uy*y

y’ = 2*ux*uy*x+(2*uy^2-1)*y。

七、3d变换矩阵

3d矩阵即为透视投影，推算方法与2d矩阵相类似

3d变换矩阵代码示例，matrix变为matrix3d

-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

八、ie matrix滤镜

ie matrix滤镜仅能实现旋转和拉伸，具体写法为：

filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod= sMethod , FilterType= sType , Dx= fDx , Dy= fDy , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )

其中M11, M12, M21, M22分别对应2d矩阵中的a,c,b,d。

1’ 所以旋转实现即为：

M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation)

对应此段代码ie7下截图为：

filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod=’auto expand’, FilterType= sType , M11= 0.53 , M12= -0.85 , M21= 0.85 , M22= 0.53 )

2‘ ie7缩放实现对应截图：

filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod=’auto expand’, FilterType= sType , M11=1.5 , M12= 0 , M21= 0 , M22=1.5 )

其他变换可以发挥想想啦。。。。

参考文章：

http://zh.wikipedia.org/zh-cn/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5

http://www.w3.org/TR/css3-2d-transforms/

http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

css3 transform matrix矩阵的使用

Transform 执行顺序问题 — 后写先执行 matrix(a,b,c,d,e,f) 矩阵函数 •通过矩阵实现缩放 x轴缩放 a=x*a    c=x*c     e=x*e; y轴缩放 b= ...

【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, 如上面矩阵示 ...

矩阵matrix变换的用法(css3属性transform: matrix)

参数 2D矩阵的表示 matrix(a,b,c,d,e,f),其中6个参数在矩阵的分布: -- -- | a c e | | b d f | | 0 0 1 | -- -- 在CSS3中矩阵的原始值是 ...

HTML 学习笔记 CSS3 (2D Matrix)

Matrix 矩阵 那么什么是矩阵呢? 矩阵可以理解为方阵,只不过 平时方阵里面站着人 矩阵中是数值: CSS3中的矩阵: css3中的矩阵指的是一个方法,书写为matrix() 和 matrix3d ...

制作变形、移位、扭曲等效果：《CSS3 transform》

今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).转换(transition)和动画(animation)等更高级的CSS3技术.本文主要介绍的是这三个属性之中的第一 ...

【消灭代办】第2周 - 数组判断、开发工具、transform:matrix、Grid

2018.11.19代办一:[数组判断] 代办描述: 怎么判断一个数组是数组呢?其实这个也是一个常考的题目 关键考点: 1.js中对象类型判断的几种方法 2.数组的知识和灵活运用 解决方案s: 篇幅过 ...

随机推荐

Java集合之HashSet

1.HashSet概述: HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用null元素.HashSe ...

阅读{django-restframework}源码[generics.py]学习笔记

首先django-restframework是基于django的一个框架.   mixins.py中开头是这样写的: Basic building blocks for generic class b ...

"旋转的风车"----windows(GDI)绘图

这正是秋季将尽, 冬季未到的时节. 黄土高坡上已滚起了漫天黄沙, 而这里却是万里晴空如练!  风, 丝丝入骨! 未央柳即将枯死的枝条,仍在挣扎. 街道两旁清一色的银杏树叶, 金灿耀眼. 耀的令人感动, ...

Redis内存使用优化与存储(转)

Redis常用数据类型 Redis最为常用的数据类型主要有以下五种: String Hash List Set Sorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Redis内部 ...

Spring框架学习之第9节

aop编程 aop(aspect oriented programming)面向切面(方面)编程,是所有对象或者是一类对象编程,核心是(在不增加代码的基础上,还增加新功能) 汇编(伪机器指令 mov ...

myEclipse新建jsp，默认编码

修改地方在: myeclipse →fiter and editor →jsp

DWM1000 定位操作流程--[蓝点无限]

蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 1烧录HEX文件 使用ST-LINK utility 烧录HEX文件,分别烧录三个基站以及一个标签,烧录基站时 ...

js基础--数据类型

1,数据类型 Number:包括小数与整数,负数,NaN ,Infinity无限大String字符串:‘abc’Boolean布尔值:true or falsenull 空undefined 未定义 ...

【Java编译】含package的类文件编译

含package的类文件编译: package com.zhangxueliang.setdemo; public class Demo1 { public static void main(Stri ...