2D matrix集合理解

最新推荐文章于 2023-11-20 11:26:22 发布

原创最新推荐文章于 2023-11-20 11:26:22 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析CSS中transform属性的matrix参数，详细阐述了六个矩阵元素分别对应的功能：scaleX、skew、rotate、scaleY、translateX和translateY，帮助读者理解如何运用这些属性实现网页元素的缩放、倾斜、旋转和平移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transform 相对比较难理解的是 2D 的集合 matrix 。
这里只是对 matrix 里面的元素进行分解
matrix( 1 , 0 , 0 , 1 , 0 , 0 )
1 2 3 4 5 6
1. 正常值为1，定义的是 scaleX 通过设置 X 轴的值来定义缩放。值：>=0
2. 正常值为0，定义的是 skew 定义 2D 倾斜
3. 正常值为0，定义的是 rotate 定义2D 旋转角度
4. 正常值为1，定义的是 scaleY 通过设置 Y 轴的值来定义缩放。值：>=0
5. 正常值为0，定义的是 translateX 通过设置 X 轴的值来定义左右位移。值：任意
6. 正常值为0，定义的是 translateY 通过设置 Y 轴的值来定义上下位移。值：任意