CSS3的transform属性与矩阵Matrix

transform简介

transform是CSS3中加入的控制元素变换的新属性（其实早在2003年的SVG1.1标准中就已经成为W3C标准，可以作为一个元素的属性使用）,可以用它实现元素的位移(translate)、缩放(scale)、旋转(rotate)、扭曲(skew)。和transition属性配合使用可以实现各种酷炫的动画效果。

CSS提供了各种变换对应的属性方法

.trans_translate { transform: translate(10px, 20px); }
.trans_scale { transform: scale(1, 0.5); }
.trans_rotate { transform: rotate(45deg); }
.trans_skew { transform: skew(35deg); }

这样的使用方式可以让使用者方便理解，使用起来更加容易。但事实上transform的实现远不止看上去那么简单，transform的所有变换都是通过矩阵(matrix)来实现的

矩阵变换

WEB中的矩阵变换有2D和3D两种，本文主要描述matrix2d的情况

二维图形的变换可概括为上述四种形式，而这四种形式都可以化为基本的矩阵运算：

• 缩放：scale(sx, sy) 等同于 matrix(sx, 0, 0, sy, 0, 0);
• 平移：translate(tx, ty) 等同于 matrix(1, 0, 0, 1, tx, ty);
• 旋转：rotate(deg) 等同于 matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0);
• 拉伸：skew(degx, degy) 等同于 matrix(1, tan(degy), tan(degx), 1, 0, 0);

缩放、旋转变换都与参考点有关，上面进行的各种变换都是以原点为参考点的。如果相对某个一般的参考点（_xf_，_yf_）作缩放、旋转变换，相当于将该点移到坐标原点处，然后进行缩放、旋转变换，最后将（_xf_，_yf_）点移回原来的位置。切记复合变换时，先作用的变换矩阵在右端，后作用的变换矩阵在左端。

参考资料

• 变换概述 | Microsoft Docs
• 转换的矩阵表示形式 | Microsoft Docs
• 理解CSS3 transform中的Matrix(矩阵) « 张鑫旭-鑫空间-鑫生活
• DOMMatrixReadOnly - Web APIs | MDN
• Matrix math for the web - Web APIs | MDN
• DOMMatrix