CSS3的transform属性与矩阵Matrix

时间 2020-06-16

标签 css3 css transform 属性矩阵 matrix 栏目 CSS 繁體版

原文原文链接

transform简介

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

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

.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)来实现的node

矩阵变换

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

二维图形的变换可归纳为上述四种形式，而这四种形式均可以化为基本的矩阵运算：
git

缩放：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_）点移回原来的位置。切记复合变换时，先做用的变换矩阵在右端，后做用的变换矩阵在左端。github

CSS3的transform属性与矩阵Matrix

transform简介

矩阵变换

参考资料