(转) CSS3 transform 中的 matrix

简书原文 链接

其他文献1

学习笔记

MDN transform


   位移 translate
   旋转 rotate
   偏移 skew
   缩放 scale

Matrix的中文是矩阵，在计算机科学中，会用矩阵来对向量进行变换，
在css3的transform属性中，可以使用矩阵对图像进行变换

css3里面可以用矩阵表示2D和3D转换

===================================================================================

2D的转换是由一个3*3的矩阵表示的
.demo{
  transform:matrix(a,b,c,d,e,f)
}
第一行代表的是X轴变化，
第二行代表的是Y轴的变化，
第三行代表的是Z轴的变化，2D不涉及到Z轴，这里使用 0 0 1

公式I
___________     _____     ___________________
| a  c  e |     | x |     | ax + cy + e
| b  d  f |  *  | y |  =  | bx + dy + f
| 0  0  1 |     | 1 |     | 0x + 0y + 1

1. 缩放scale(x,y)
缩放对应的是矩阵中的a和d，
x轴的缩放比例对应a,
y轴的缩放比例对应d。

matrix(a, 0, 0, d, 0, 0);
_________
| a 0 0 |   x = ax + cy + e => ax 是缩放
| 0 d 0 |   y = bx + dy + f => dy 是缩放
| 0 0 1 |   z = 0x + 0y + z =>

2. 平移 translate(x, y)
平移x => e
平移y => f

matrix(1, 0, 0, 1, e, f)
_________
| 1 0 e |   x = ax + cy + e => e 是平移
| 0 1 f |   y = bx + dy + f => f 是平移
| 0 0 1 |   z = 0x + 0y + z =>

3. 旋转 rotate(θdeg) ???
a = cos(θ)
b = sin(θ)
c = -sin(θ)
d = cos(θ)

x1 = cos(θ)x0 - sin(θ)y0 + e
y1 = sin(θ)x0 + cos(θ)y0 + f

// 弧度和角度的转换公式：弧度=π/180×角度
const radian = Math.PI / 180; // 单位弧度

4. 一个元素在二维平面上的倾斜转换 skew(xdeg,ydeg) ???
MDN skew
x 轴和 y 轴，分别对应矩阵中的 c 和 b。
b=tan30° => y轴
c=tan20° => x轴

公式II
___________     ___________     __________________________________________________
| a  c  e |     | A  C  E |     | (aA + cB + eG)  (aC + cD + eH)  (aE + cF + eI) |
| b  d  f |  *  | B  D  F |  =  | (bA + dB + fG)  (bC + dD + fH)  (bE + dF + fI) |
| g  h  i |     | G  H  I |     | (gA + hB + iG)  (gC + hD + iH)  (gE + hF + iI) |