头图: @Linksphotograph

前言

CSS 中对于我一直有一个神奇的知道听说过但是从来不会去用的东西:transform: matrix()transform: skew()。这玩意到底是用来怎么对一个元素进行变换的呢,表面上乍一眼看上去几个参数一头雾水,但是又能弄出神奇的效果。今天来学学看。

2D 变换

我们定义一个 transform: matrix(a, b, c, d, e, f) 的变换,实际上生成了如下的变换矩阵

$\begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix}$

最后一行的 $\begin{bmatrix} 0 & 0 & 1 \end{bmatrix}$ 用于对 3D 变换中的 z 轴进行变换,故先不讨论。

其实吧,搜了一圈之后这玩意也没多么神秘,干的事情就是:

$\begin{equation} \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix}= \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}= \begin{bmatrix} ax + cy + e \\ bx + dy + f \\ 1 \end{bmatrix} \end{equation}$

用上列矩阵乘法可将原来元素的每一个坐标映射到一个新的坐标,即得产生一种变换效果,经过插值处理之后,渲染出元素变换之后的图形。

如果我们将这个矩阵设为单位矩阵,即 $a = d = 1$,$b = c = e = f = 0$,那么就有:

$\begin{equation} \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix}= \begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}= \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} \end{equation}$

即不对原元素做任何变换

而如果此时修改 $e, f$ 两个参数,可想而知的 $x' = x + e, y' = y + f$。即等价于 transform: translate({e}px, {f}px);

再例如修改 $a, d$ 两个参数,等价于 transform: scale({a}, {d})

再看看复杂一点的 transform: rotate(θdeg) 怎么做。还记得坐标轴绕原点旋转的坐标变换公式吗?

$$\left\{ \begin{aligned} x' = x\cos\theta - y\sin\theta \\ y' = y\cos\theta + x\sin\theta \end{aligned} \right.$$

嘿嘿传入参数构造出这个式子就好了

transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)

总之吧,这个东西就是你数学有多好,脑洞有多大,就可以有多灵活。由于参数到实际效果的不直观性,Transform Matrix(矩阵变形)-Css3演示 这个网站可以帮助你可视化调整 matrix 参数,或许可以减少困惑。

在了解完机制之后我觉得在不是非常必要的场景我也不会去选择使用 matrix (逃

skew

相比之下 skew() 的效果就比较的直观了。

但是我居然没法很好的用语言描述这玩意是怎么实现变换的,还是要掏出 matrix 大法。

skew(x, y) 其实等价到 matrix 就是 matrix(1, tan(y), tan(x), 1, 0, 0)

最终呢,

$$\left\{ \begin{aligned} x' = x + y\tan(x) \\ y' = y + x\tan(y) \end{aligned} \right.$$

嗯~公式已经说明一切了,够具体和表象了(手动笑哭)

小结

今天写完这篇文章,对 matrixskew 两个方法稍微了解了一下,以后需要做特殊的效果的时候估摸着还可以想起来吧😂其实现在也没觉得高大上了,总比听到这个名词敬而远之心理抗拒要好一些了hhhhh

参考

大学没学过数学也要理解 CSS3 transform 中的 matrix_慕课手记
特效属性「Transform」+ 矩阵 matrix - 简书
Transform Matrix(矩阵变形)-Css3演示