CSS3中的矩阵
CSS3中的矩阵
CSS3中的矩阵指的是一个方法,书写为matrix()
和matrix3d()
,前者是元素2D平面的移动变换(transform),后者则是3D变换。2D变换矩阵为3*3,如下面矩阵示意图;3D变换则是4*4的矩阵。
有些迷糊?恩,我也觉得上面讲述有些不合时宜。那好,我们先看看其他东西,层层渐进——transform
属性。
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°,其后面运作的机理是什么呢?
下面这张图可以解释上面的疑问:
无论是旋转还是拉伸什么的,本质上都是应用的matrix()
方法实现的(修改matrix()
方法固定几个值),只是类似于transform:rotate
这种表现形式,我们更容易理解,记忆与上手。
换句话说,理解transform
中matrix()
矩阵方法有利于透彻理解CSS3的transform
属性.
在CSS3以及HTML5的世界里,这玩意还是涉猎蛮广的,如SVG
以及canvas
.
CSS3 transform
的matrix()
方法写法如下:
transform: matrix(a,b,c,d,e,f);
吓住了吧,这多参数,一个巴掌都数不过来。
实际上,这6参数,对应的矩阵就是:
注意书写方向是竖着的
上面提过,要让其发生变化,只有与另外就可以了,即使这是个小阵。
反应在这里就是如下转换公式:
其中,x
, y
表示转换元素的所有坐标(变量)了。那后面的ax+cy+e
怎么来的呢?
很简单,3*3矩阵每一行的第1个值与后面1*3的第1个值相乘,第2个值与第2个相乘,第3个与第3个,然后相加,如下图同色标注:
那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)
。好好想象下,原来(0,0)
的位置,移到了白点的(30,
处,怎么样,是不是往右下方同时偏移了30像素哈!!
30)
实际上transform: matrix(1, 0, 0,1, 30, 30);
就等同于transform: translate(30px, 30px);
. 注意:translate
, rotate
等方法都是需要单位的,而matrix
方法e,
参数的单位可以省略。
f
总结
聪明的你可能以及意识到了,尼玛matrix表现偏移就是:
transform: matrix(与我无关, 哪位, 怎么不去高考, 打麻将去吧,水平偏移距离, 垂直偏移距离);
transform matrix矩阵与缩放,旋转以及拉伸
偏移是matrix效果中最简单,最容易理解的,因此,上面很详尽地对此进行展开说明。下面,为了进一步加深对matrix的理解,会简单讲下matrix矩阵与缩放,旋转以及拉伸效果。
缩放(scale)
上面的偏移只要关心最后两个参数,这个缩放也是只要关心两个参数。哪两个呢?
如果你足够明察秋毫,应该已经知道了,因为上面多次出现的:
transform: matrix(1, 0, 0, 1, 30, 30);
已经出卖了。
发现没,matrix(1, 0,0, 1,
的元素比例与原来一样,1:1,而这几个参数中,有两个30, 30);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)
结合矩阵公式,就有:
不过,说句老实话,就旋转而言,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
轴,两者并无关联。
我想有人会奇怪,既然CSS3 transform中提供了像skew
, rotate
, …
效果,那还需要掌握和熟悉让人头大的矩阵方法干嘛呢?
好问题,确实,对于一般地交互应用,transform
属性默认提供的些方法是足够了,但是,一些其他的效果,如果transform
属性没有提供接口方法,那你又该怎么办呢?
没辙了吧,这是,就只能靠matrix
矩阵了。要知道,matrix矩阵是transform
变换的基础,可以应付很多高端的效果,算是一种高级应用技巧吧。掌握了基础,才能兵来将挡水来土掩啊。
CSS3中的矩阵的更多相关文章
- 对CSS3中的transform:Matrix()矩阵的一些理解
只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...
- css3 matrix 2D矩阵和canvas transform 2D矩阵
一看到“2D矩阵”这个高大上的名词,有的同学可能会有种畏惧感,“矩阵”,看起来好高深的样子,我还是看点简单的吧.其实本文就很简单,你只需要有一点点css3 transform的基础就好. 没有前戏,直 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- css3中变形与动画(一)
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...
- CSS3中的变形处理(transform)属性
在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3中transform几个属性值的注意点
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- 第8章 CSS3中的变形与动画(上)
变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...
随机推荐
- Python3 字典 clear()方法
Python3 字典 描述 Python 字典 clear() 函数用于删除字典内所有元素. 语法 clear()方法语法: dict.clear() 参数 NA. 返回值 该函数没有任何返回值. ...
- oracle 时间
select to_char(to_date(sysdate,'yyyy-mm-dd'),'day') from dual; select to_date('2017-12-31','day') fr ...
- poj3783 Balls
Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1110 Accepted: 721 Description ...
- IO多路复用之epoll(一)讲解
网络通信中socket有自己的内核发送缓冲区和内核接受缓冲区,好比是一个水池, 当用户发送数据的时候会从用户缓冲区拷贝到socket的内核发送缓冲区,然后从 socket发送缓冲区发出去, 当用户要读 ...
- 用python + openpyxl处理excel(07+)文档 + 一些中文处理的技巧
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...
- Unix处理目标文件的工具
- struts2的action中@Autowired注入为null的解决方案
今天遇到类似问题,记录下来以便以后查阅: @Aspect作用于action,致使action中的@Autowired注入为null的解决方案,以下三种任选一种: 1.去掉@Autowired,改用se ...
- vijos 1243 生产产品 DP + 单调队列优化
LINK 题意:有1个产品,m个步骤编号为1~m.步骤要在n个机器人的手中生产完成.其中,第i个步骤在第j个机器人手中的生产时间给定为$T[i][j]$,切换机器人消耗cost.步骤必须按顺序,同一个 ...
- Liunx 下载文件夹下所有文件
136down voteaccepted You may use this in shell: wget -r --no-parent http://abc.tamu.edu/projects/tzi ...
- 【BZOJ】2142 礼物
[算法]中国剩余定理 [题意]给定n件物品分给m个人,每人分到wi件,求方案数%p.p不一定是素数. [题解] 首先考虑n全排列然后按wi划分成m份,然后对于每份内都是全排列,除以wi!消除标号影响, ...