transform简介transform是CSS3中新增的一个属性，用来控制元素的变换（其实早在2003年就在SVG1.1标准中成为了W3C标准，并且可以作为元素的一个属性），可以用它来实现元素位移（translate）、缩放（scale）、旋转（rotate）、扭曲（skew）。可以和transition属性结合使用，实现各种炫酷的动画效果。CSS为transformation.trans_translate{transform:translate(10px,20px);提供了各种属性方法}.trans_scale{转换：scale(1,0.5);}.trans_rotate{变换：旋转（45deg）；}.trans_skew{变换：偏斜（35度）；}这种使用方式可以让用户更容易理解和使用。但实际上，transform的实现远不止看起来那么简单。transform的所有变换都是通过矩阵（matrix）来实现的。WEB中有两种矩阵变换，2D和3D。本文主要描述matrix2d的情况。二维图形的变换可以概括为以上四种形式，而这四种形式可以转化为基本的矩阵运算：缩放：scale(sx,sy)等价于matrix(sx,0,0,sy,0,0);translation: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_)点回到原来的位置。请记住，组合变换时，先应用的变换矩阵在右端，后应用的变换矩阵在左端。参考转换概述|MicrosoftDocs转换矩阵表示|MicrosoftDocs了解CSS3转换中的矩阵
