HTML 学习笔记 CSS3 (2D Matrix)

Matrix 矩阵 那么什么是矩阵呢?

矩阵可以理解为方阵,只不过 平时方阵里面站着人 矩阵中是数值:

HTML 学习笔记 CSS3 (2D Matrix)

CSS3中的矩阵:

css3中的矩阵指的是一个方法,书写为matrix() 和 matrix3d(),前者是元素2D平面的移动变换(transfrom),而后者是3D变换。2D变换矩阵3*3,如上图的示意图:3D变换则是4*4的矩阵。

可能有些难以理解 我们可以先看看其他东西 层层渐近-transform属性

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

扭曲(skew)缩放(scale) 旋转(rotate) 以及位移(translate)

那你有没有想过 为什么transform:rotate(45deg); 会让元素旋转45度 其后面作用的机理是什么呢。

下面这张图可以解释上面的疑问:

HTML 学习笔记 CSS3 (2D Matrix)

可以看到无论是旋转还是拉伸 本质上应用的都是matrix()方法实现的(修改matrix()方法固定的几个值),只是类似于transform:rotate这种表现形式 我们更容易理解 记忆 与 上手。

换句话说理解transform中的matrix()矩阵方法有利于透彻理解CSS3中的transform属性。

矩阵应用场景和transform的坐标系统

实际上 在CSS3以及HTML5的世界里 矩阵matrix用的还是十分广泛的。 如 SVG和canvas

用过transform旋转的人可能发现了 其默认是绕着中心点旋转的,而这个中心点就是transform-origin属性对应的点。也就是矩阵计算的一个重要的依据点。

HTML 学习笔记 CSS3 (2D Matrix)

当我们通过transform-origin属性进行设置的时候,矩阵相关的计算也就随着而改变,反映到实际图像效果上就是 旋转拉伸的中心点变了!

举例来说:如果我们设置了元素的基点在左下角时:

-webkit-transform-origin: bottom left;

坐标中心就是左下角位置  于是动画(比如图片收缩)就是基于图片的左下角这一点了:

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.anim_image {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor: pointer;
}
.anim_image_top {
position: absolute;
-webkit-transform: scale(0,0);
opacity: 0; }
.anim_box:hover .anim_image_top {
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transform-origin:top right;
}
.anim_box:hover .anim_image_bottom {
-webkit-transform: scale(0, 0);
-webkit-transform-origin: bottom left;
}
</style>
</head>
<body>
<div id="testBox" class="demo anim_box">
<img class="anim_image anim_image_top" src="../img/top.png" />
<img class="anim_image anim_image_bottom" src="../img/bottom.png" />
</div>
</body>
</html>

可以运行一下 看看效果 分别是基于右上角 和 左上角的缩放。

可以在举个例子

transform-origin: 50px 70px;

中心点的位置移到了距离左侧50像素 顶部70像素的地方 而此时的(30,30)坐标则移到了图中白点的位置:

HTML 学习笔记 CSS3 (2D Matrix)

现在是不是很好理解了呢。

下面我们就跟着大神的脚步 来理解一下 2D matrix (哈哈 我也是看着大神的博客抄的。后面会贴出出处)

CSS3中 transform的matrix()方法 写法如下:

transform:matrix(a,b,c,d,e,f);

参数很复杂 达到了六个

实际上这六个参数对应的矩阵就是:

HTML 学习笔记 CSS3 (2D Matrix)

注意书写的方向是竖着的。

上面提过,矩阵可以想象成古代的士兵方阵,要让其发生变化,只有与另外一个士兵阵火拼就可以了,即使这是个小阵。

反应到这里 就是如下的转换公式

HTML 学习笔记 CSS3 (2D Matrix)

其中 x,y表示转换元素的所有坐标了 那后面的ax+cy+e是怎么来的呢?

很简单 3*3矩阵每一行的第一个值与后面1*3的第一个值相乘

HTML 学习笔记 CSS3 (2D Matrix)

那ax+cy+e的意义是什么?

记住了,ax+cy+e为变换后的水平坐标,bx+dy+f表示变换后的垂直位置。

下面看一个例子:

transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */

现在 我们根据这个矩阵偏移元素的中心点,假设是(0,0),即x=0 y = 0

于是,变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30, y坐标就是bx+dy+f = 0*0+1*0+30 =30.

于是,中心点坐标从(0, 0)变成了→(30, 30)。对照上面有个(30, 30)的白点图,好好想象下,原来(0,0)的位置,移到了白点的(30, 30)处,怎么样,是不是往右下方同时偏移了30像素哈!!

实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意:translate, rotate等方法都是需要单位的,而matrix方法e, f参数的单位可以省略。

所以说 可以看出来 只要是中心点没有改变还是原来的(0,0) 那么matrix表现偏移就是

transform: matrix(与我无关, 哪位, 怎么不去高考, 打麻将去吧, 水平偏移距离, 垂直偏移距离);

你只要关心后面两个参数就可以了,至于前面4个参数,是牛是马,是男是女都没有关系的。

transform matrix矩阵与缩放,旋转以及拉伸

偏移是matrix效果中最简单,最容易理解的,因此,上面很详尽地对此进行展开说明。下面,为了进一步加深对matrix的理解,会简单讲下matrix矩阵与缩放,旋转以及拉伸效果。

缩放(scale)
上面的偏移只要关心最后两个参数,这个缩放也是只要关心两个参数。哪两个呢?

如果你足够明察秋毫,应该已经知道了,因为上面多次出现的:

transform: matrix(1, 0, 0, 1, 30, 30);

已经出卖了。

发现没,matrix(1, 0, 0, 1, 30, 30);的元素比例与原来一样,1:1, 而这几个参数中,有两个1, 啊哈哈!没错,这两个1就是缩放相关的参数。

其中,第一个缩放x轴,第二个缩放y轴。

用公式就很明白了,假设比例是s,则有matrix(s, 0, 0, s, 0, 0);,于是,套用公式,就有:
x' = ax+cy+e = s*x+0*y+0 = s*x;
y' = bx+dy+f = 0*x+s*y+0 = s*y;

也就是matrix(sx, 0, 0, sy, 0, 0);,等同于scale(sx, sy);

旋转(rotate)
旋转相比前面两个要更高级些,要用到(可能勾起学生时代阴影的)三角函数。

方法以及参数使用如下(假设角度为θ):

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

结合矩阵公式,就有:

x' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

哎呀呀,四个参数,我记不住啊!莫慌,我们可以这样子记忆:
CS-SC:初三-上床,对称结构,这下忘不了了吧~~

不过,说句老实话,就旋转而言,rotate(θdeg)这种书写形式要比matrix简单多了,首先记忆简单,其次,无需计算。例如,旋转30°,前者直接:

transform:rotate(30deg);

而使用matrix表示则还要计算cos, sin值:

transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);

拉伸(skew)
拉伸也用到了三角函数,不过是tanθ,而且,其至于b, c两个参数相关,书写如下(注意y轴倾斜角度在前):

matrix(1,tan(θy),tan(θx),1,0,0)

套用矩阵公式计算结果为:

x' = x+y*tan(θx)+0 = x+y*tan(θx)
y' = x*tan(θy)+y+0 = x*tan(θy)+y

对应于skew(θx + "deg",θy+ "deg")这种写法。

其中,θx表示x轴倾斜的角度,θy表示y轴,两者并无关联。

大神的博客在此 有兴趣的可以移步到此:http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵/

上一篇:HTML 学习笔记 CSS3(Animation)


下一篇:CSS3 学习笔记(动画 多媒体查询)