CSS3的Matrix是一个transform属性值，用于2D变形，结合旋转、缩放和平移。当需要同时设置多个变换效果时，如位移、旋转和缩放，Matrix变得尤为重要。Matrix由6个参数构成，控制元素的旋转、缩放和移动。例如，`matrix(a, b, c, d, e, f)`，其中e和f分别控制x和y轴的平移，a和d控制缩放，a、b、c、d组合控制旋转。示例展示了未使用Matrix和使用Matrix进行旋转和缩放的效果。"
133477530,20014947,Shell脚本打造Docker化Linux应用实战,"['Docker', 'Linux', '容器']
css3 Matrix：可以同时缩放旋转平移元素的transform的属性值
我比较懒，为了方便同样跟我一样懒得人，直接上干货！
Matrix是什么？
Matrix是Css3中的一个的一个新属性transform的属性值，transform用来元素的2D或3D变形；也就是你可以将元素旋转，缩放，移动，倾斜等。
什么时候需要用到Matrix？
transform有很多变形的属性，比如：translate-位移，rotate-旋转，scale-缩放
那么想同时设置位移，旋转，缩放，以及倾斜就要用到Matrix了。
如何设置Matrix的值？
**写法**：transform:matrix(0.866,0.5,-0.5,0.866,0,0);
一共6个参数，包含旋转，缩放，移动（平移）和倾斜功能。这6各参数，我暂且先取名abcdef也就是matrix（a,b,c,d,e,f）。
- e是x轴的平移。
- f是y轴的平移。
- a是x轴对的缩放，以倍数的方式控制。
- d是y轴对的缩放，以倍数的方式控制。
- a，b，c，d是共同控制旋转角度的，以cosθ，sinθ，-sinθ，cosθ的方式共同控制,bc处是sinθ-sinθ就是顺时针旋转
其实就是：matrix（倍数·cosθ，sinθ，-sinθ，倍数·cosθ，0，0);
可以看到上面的这个例子：transform:matrix(0.866,0.5,-0.5,0.866,0,0);前四个参数都是小数，因为cosθ和sinθ的值都是在-+1之间，所以前四个参数通过倍数和cosθsinθ的值共同作用控制缩放旋转，
实例
先看下没有用matrix的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.square{
最低0.47元/天 解锁文章
扫一扫
1425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
