transform matrix阅读后的理解

1.首先很感谢博主的分享https://www.cnblogs.com/Ivy-s/p/6786622.html#4171054,然后我在这里记录一下自己的收货。

正文:

1)transform: matrix(1,0,0,1,0,0);//初始值

  a:1  c:0  e:0    x     1

  b:0  d:1  f:0      ·     y  =    1

     0     0    1    1        1

  x`=ax+cy+e

  y`=bx+dy+f

1 .contain{height: 300px;    width: 300px;border: 1px solid red;background-color: beige;margin: 50px auto;}
2 .mian{height: 100px;width: 50px;border: 1px solid black;background-color: lightblue;transform: matrix(1,0,0,1,0,0);//初始值}

2)transform: matrix(1,0,0,1,100,50);//X平移100,y平移50

扫描二维码关注公众号,回复: 5064812 查看本文章

3)transform: matrix(2,0,0,2,100,50);//平移后,X,y放大2倍

4)transform: matrix(0.2588,0.9659,-0.9659,0.2588,0,0);//旋转75度

  cos75≈0.2588

  sin75≈0.9659

  a:cos75  c:-sin75  e:0    x

  b:sin75   d:cos75  f:0      ·        y

       0             0         1     1 

主要根据上文博主中提到的线代来计算

x'=ax+cy+e
y'=bx+dy+f

猜你喜欢

转载自www.cnblogs.com/kekeSummer/p/10319199.html