CSS3的transform和matrix

一时失言乱红尘 2022-05-10 08:04 232阅读 0赞

# 1、基于矩阵的应用 #

**矩阵（matrix）本是transform属性下的一个方法，而transform属性的其他方法如translate（平移）、scale（缩放）、skew（拉伸）和rotate（旋转）等都是基于矩阵封装的一些方法。在下面的推导中将会看到。**

# 2、transform的坐标系统 #

**我们在使用旋转的时候都会发现，元素是在根据一个中心点进行的缩放与旋转的。那么这个中心点就是transform-origin所指定的那个点。也是所有矩阵运算的依据点，如果这个点发生改变，那么我们对元素进行缩放或旋转的效果都会不一样。**

# 3、矩阵的用法与详解 #

**transform方法的用法如下**

transform: matrix(a, b, c, d, e, f);

**这6个参数实际上对应着一个三阶矩阵 \[ a c e b d f 0 0 1 \] \\begin\{bmatrix\} a & c & e \\\\ b & d & f \\\\ 0 & 0 & 1 \\\\ \\end\{bmatrix\} ⎣⎡ab0cd0ef1⎦⎤，那么在进行转换的时候实际上进行了一个矩阵运算： \[ a c e b d f 0 0 1 \] ⋅ \[ x y 1 \] = \[ a x + c y + e b x + d y + f 1 \] \\begin\{bmatrix\} a & c & e \\\\ b & d & f \\\\ 0 & 0 & 1 \\\\ \\end\{bmatrix\} · \\begin\{bmatrix\} x \\\\ y \\\\ 1 \\\\ \\end\{bmatrix\} = \\begin\{bmatrix\} ax + cy + e \\\\ bx+ dy + f\\\\ 1 \\\\ \\end\{bmatrix\} ⎣⎡ab0cd0ef1⎦⎤⋅⎣⎡xy1⎦⎤=⎣⎡ax\+cy\+ebx\+dy\+f1⎦⎤其中的x和y是元素中的所有坐标，那么我们从上面的式子可以知道转换后的x和y值如下： x ′ = a x + c y + e x&\#x27;=ax+cy+e x′=ax\+cy\+e  y ′ = b x + d y + f y&\#x27;=bx+dy+f y′=bx\+dy\+f**

**那么上面的计算与我们的缩放，平移这些操作有什么关系呢？我们以平移来举例子。**

transfrom: matrix(1, 0, 0, 1, 40, 40);	/*这个写法与translate(40px, 40px)效果一致*/

**套用上面我们推导出的公式可知元素新的x和y值为： x ′ = x + 40 x&\#x27;=x+40 x′=x\+40  y ′ = y + 40 y&\#x27;=y+40 y′=y\+40可以看出元素的每个坐标的x和y值都加了40，这就实现了向x和y轴正方向分别平移40像素的效果。**

**我们再用缩放举个例子，缩放的用法如下：**

transform: matrix(2, 0, 0, 2, 0, 0)		/*这个写法与transform: scale(2, 2)效果一致*/

**套用上面公式可以得出： x ′ = 2 x x&\#x27; = 2x x′=2x  y ′ = 2 y y&\#x27; = 2y y′=2y 可以看出元素的每个坐标都被放大了两倍，那么就能够实现缩放的效果**

**其他用法如下**

旋转：

transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) /*效果与transform: rotate(θ)一致*/

拉伸：

transform: matrix(1, tan(θy), tan(θx), 1, 0, 0) /*效果与transform: skew(θ)一致*/