matrix 2d in CSS3

在css3中有几个函数来确定w3c盒子模型的位置变换和大小以及变形。
由于一下各处代码都基于webkit实现所以,不考虑其他兼容性,只考虑
实现的内部功能机理。

//通常用到的函数,针对w2c盒子模型
-webkit-transform:scale(1.5);
/*缩放:scale参数假设为x,当x>1,盒子放大;当0<x<1,盒子缩小*/
-webkit-transform:translate(30px,40px);
/*移动:第一个参数假设为dx,第二个参数dy;
  第一个控制在x方向移动,即水平方向移动;
  第二个控制y方向移动,即竖直方向移动*/
 -webkit-transform:rotate(30deg);
 /*角度变换:默认为盒子图形的几何中心,旋转默认为逆时针*/

上述除了skew没有介绍之外,其他应该都是经常用到的函数。
但是他们都是matrix的特殊情况,matrix有六个参数,我也随大溜的起名为a,b,c,d,e,f,单位是可以省略的;

-webkit-transform:matrix(1,0,0,1,10,20);
//matrix语法在css3中

运算规则用到了大学线性代数的矩阵知识:
matrix运算公式
这里的x,y都是当前像素点的坐标。
数学知识的补充:
1>两个矩阵相乘,M[ab]N[bc]=T[ac]M[a*b]*N[b*c]=T[a*c]
第一个矩阵列数和第二个矩阵的行数相等。
2>Tij=M[i1]N[1j]+M[i2]N[2j]+...M[in]N[nj];(n=1,2,3,....n)T_{ij}=M[i1]*N[1j]+M[i2]*N[2j]+...M[in]*N[nj];(n=1,2,3,....n)
即第一矩阵的行中的第n个元素乘以第二矩阵中相应第n个元素

举例:
有一个盒子,在网页中它是按照像素来计算的。假如设置了一个div,

div{width:300px;height:300px;}

这里的div被全部分解为1px1px的小控制点,也就是说有300300个控制点。这些控制点每个都有一个坐标(x,y).
matrix会对这些控制点进行遍历迭代,对于每个控制点,在当前坐标(x,y)
进行变换。
x变化:
变换后的坐标:cx=ax+cy+ec_x=a_x+c_y+e
y变化:
变换后的坐标:cy=bx+dy+fc_y=b_x+d_y+f
上述函数都是matrix在参数固定时的特例。
translate(tx,ty)->matrix(1,0,0,1,tx,ty)
计算:cx=1x+0y+tx
cy=0x+1y+ty
发现横纵坐标恰巧是当前坐标+tx(ty);
scale(m)->matrix(m,0,0,m,0,0)
rotate(n)->matrix(cosB,sinB,-sinB,cosB,0,0)

matrix可以实现很多特效,但是从数值计算上决定了,完成一个特效是特别复杂的,但恰是如此才能体现其魅力。整天面对一大堆div盒子,也似乎没有什么提升,而matrix和matrix3D正是另一层境界的主要内容。

发布了258 篇原创文章 · 获赞 62 · 访问量 17万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览