CSS3矩阵理解———transform: matrix()改变元素运动的本质

╰+攻爆jí腚メ 2022-03-01 05:04 351阅读 0赞

在CSS3转换这个大板块里面，有很多的细小的分类。例如这类rotate（旋转）,translate（移动）,scale（缩小）,skew（扭曲），其实这类的函数都是为了供各位的开发者便捷使用的。那么在CSS3中也有这样一个比较神奇的参数matrix()，你想要真的能够用好它，还是需要一点线性代数的知识的哦。

![20190321183548287.jpg][]

在网上我也看了很多的技术贴，以及各类的博客。其实吧，大部分都是转的前端大佬张鑫旭的那篇关于CSS3矩阵的文章了。那么我就来写一点自己的见解好了，真的感觉原创不易呀。那么我现在就直接直奔主题了~

--------------------

## CSS3矩阵的概念 ##

![20190321184831377.jpeg][]矩阵如图，咳咳咳，貌似放错图了。

![20190321185114986.png][]这样看比较清楚明了，矩阵计算就是计算里面的值而已。怎样计算就不在这里写了，详细的往下面看，在这里我就不过多阐述。

接下来划重点了，各位小本本都带上了没有。

##  matrix() ##

CSS3中让元素能够实现在2D平面完成各种高难度的动作，例如scale(缩放)、translate(平移)、rotate(旋转)和skew(扭曲)。你们知不知道一点，这几个都是弟弟，真正的爸爸是matrix()。可以说这4个方法是css3矩阵matrix创造出来的快捷方式几个快捷方式而已，这几个就像灭霸之子（滑稽）。

matrix方法有六个参数matrix(a, b, c, d, x, y)，六个参数默认值是matrix(1, 0, 0, 1, 0, 0)，这六个参数分别控制不同的变换

a 水平缩放、b 水平拉伸、c 垂直拉伸、d 垂直缩放、x 水平位移、y 垂直位移

transform:matrix（a，b，c，d，tx，ty）；注意书写方向是竖直方向。那么它的转换公式为x、y表示转换元素的所有坐标

如图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70][]

那么它的计算方式为：

a c e分别对x y 1进行相乘并相加得出结果ax + cy + e；

b d f分别对x y 1进行相乘并相加得出结果bx + dy + f；

ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。

### 那么我们来举个栗子看看 ###

transform:matrix（1，0，0，1，30，30）；/\*a=1，b=0，c=0，d=1，e=30，f=30\*/根据这个矩阵偏移元素的中心点，假设是（0，0），即x=0，y=0变换后，根据上面的计算方式我们就可以得出：x=ax+cy+e=1\*0+0\*0+30=30 ，y=bx+dy+f=0\*0+0\*1+30=30于是，整个元素的中心点从（0，0）变成了（30，30），所以这样整个元素就发生了平移。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 1][]

transform:matrix（1，0，0，1，x，y）等同于transform:translate（x，y）

以上就是关于平移的写法，以及算法那么我还有其他的几种效果，那么他们的算法为：

矩阵matrix缩放（scale）  
matrix（sx，0，0，sy，0，0）—scale（sx，sy）  
矩阵matrix旋转（rotate）  
matrix（cosθ，sinθ，-sinθ，cosθ，0，0）—rotate（θdeg）。  
矩阵matrix拉伸（skew）  
matrix（1，tanθy，tanθx，1，0，0）—skew（θxdeg，θydeg）。

既然这种写法这么的麻烦，用原生的写法，那我为撒子还要看这些东西。当让了这样写，也能完成一些，用那四种完成不了的效果，就比如镜像对称。

矩阵matrix镜像对称效果  
matrix（1-k\*k）/（1+k\*k），2k/（1+k\*k），2k/（1+k\*k），（k\*k-1）/（1+k\*k），0，0）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 2][]

公式我就丢在这里了，大家自己多算算吧（滑稽）。

[20190321183548287.jpg]: /images/20220301/5c4a133db4f94b9281d0604032479989.png
[20190321184831377.jpeg]: /images/20220301/605fe320387a43e9bff4fb70eef529d2.png
[20190321185114986.png]: /images/20220301/cee33bc6f6994680b984e0368fd81530.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70]: /images/20220301/28793cbaee79435fb3a6a37daaf8a9a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 1]: /images/20220301/14a847b768354b528dac8090c1a209c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 2]: /images/20220301/f5f9889703864fe0a8fb297f7df5d945.png