矩阵是transform给咱们选中的计算规则
矩阵的乘法
矩阵的规则 ：
第一矩阵的行数 必须等与第二矩阵的列数
第二矩阵有多少列 得数就有多少列
矩阵是从后往前推 第一矩阵是由 第二矩阵 与 得数 推算出来的 得数也就是transform想要的结果
第一矩阵 第二矩阵 得数
第一矩阵 第二矩阵 得数
| a,c,e | | x | | ax + cy + e |
| b,d,f | * | y | = | bx + dy + f |
| 0,0,1 | | 1 | | 0 + 0 + 1 |
a b c d e f 为选填的值 ，最后一行是为啦利于矩阵计算 x y 是我们需要变换元素的原始坐标 元素的每一个原始坐标都是x,y 得数即为结果，结果是在元素每一个原始的x，y加上一些值来实现元素的transform变化

  1.         | a,c,e |   | x , x1 |     | ax + cy + e , a*x1 + c*y1 + e|<br />            | b,d,f | * | y , y1 | = | bx + dy + f , b*x1 + d*yi + f|  <br />            | 0,0,1 |   | 1 , 1  |     | 0 + 0 + 1 , 0 + 0 + 1            |                                                                                                            矩阵是从后往前推 第一矩阵是由 第二矩阵 与 得数 推算出来的  得数也就是transform想要的结果   下面这个矩阵是translate(x,y)<br />            | 1 0 e |   | x |   | x + e |<br />            | 0 1 f | * | y | = | y + f |<br />            | 0 0 1 |   | 1 |   | 1     |<br />            translate(x,y) === matrix(1,0,0,1,e,f)

scale() 的矩阵反推 scale是伸缩，那不就是将x与y同时乘以相同的倍数 哪矩阵的得数就为 |(倍数)x| |(倍数)y| |1| 哪吗反推第一矩阵 |a 0 0| |0 d 0| |0 0 1| 那吗矩阵就为
| a,0,0 | | x | | ax + 0 + 0 |
| 0,d,0 | * | y | = | 0 + dy + 0 |
| 0,0,1 | | 1 | | 0 + 0 + 1 |
scale(x,y) === matrix(a,0,d,0,0)

  1.         matrix(cos(θ),sin(θ),-sin(θ),cos(θ),0,0) === rotate(θ) // 此处的θ为角度<br />| cos(θ),-sin(θ),0 |     | x |      | cos(θ)x - sin(θ)y + 0   |<br />| sin(θ),cos(θ) ,0 |  *  | y |   = | sin(θ)x + cos(θ)y + 0 | <br />| 0     ,0      ,1     |     | 1 |       |  1                               |
  3.         3d的矩阵<br />            matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1) 缩放<br />            matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1) 平移

demo图片镜像

  1.         div {
  2.             width: 200px;
  3.             height: 200px;
  4.             background: url(/1.jpg);
  5.             background-size: cover;
  6.             margin: 100px auto;
  7.         /* 
  8.             图片镜像矩阵
  9.             | -1,0,0 |   | x |   | -x |
  10.             | 0,1,0  | * | y | = | y  |  
  11.             | 0,0,1  |   | 1 |   | 1  |
  13.           */
  14.             transform: matrix(-1,0,0,1,0,0); 
  15.         }

图片镜像前的样式
image.png
图片镜像后 这里只是将图片左右颠覆
image.png