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'=ax+cy+e x′=ax+cy+e y ′ = b x + d y + f y'=bx+dy+f y′=bx+dy+f
那么上面的计算与我们的缩放,平移这些操作有什么关系呢?我们以平移来举例子。
transfrom: matrix(1, 0, 0, 1, 40, 40); /*这个写法与translate(40px, 40px)效果一致*/
套用上面我们推导出的公式可知元素新的x和y值为: x ′ = x + 40 x'=x+40 x′=x+40 y ′ = y + 40 y'=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' = 2x x′=2x y ′ = 2 y y' = 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(θ)一致*/