zoukankan      html  css  js  c++  java
  • 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

    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度

      matrix(cos75,sin75,-sin75,cos75,0,0)

      cos75≈0.2588

      sin75≈0.9659

      a:cos75  c:-sin75  e:0    x

      b:sin75   d:cos75  f:0      ·        y

           0             0         1     1 

    5)transform: matrix(1,0,0.577,1,0,0);//拉伸30度(X轴向前伸展,Y轴与图形右边线形成30度夹角)

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

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

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

  • 相关阅读:
    基于vue的购物车清单
    圣杯布局和双飞翼布局
    正则限制input负数输入
    vue.js devtools图标不亮
    将二维数组转换成一维数组(基于reduce)
    基于PROMISE解决回调地狱问题
    封装AJAX库(参考JQ)
    for in和for of的区别
    抢购倒计时的实现
    git clone --depth=1 后获取其他分支
  • 原文地址:https://www.cnblogs.com/kekeSummer/p/10319199.html
Copyright © 2011-2022 走看看