1transform属性CSS3中transform函数可以实现四种变形：文本或文本的旋转、缩放、倾斜、移动图片处理。(1)浏览器支持目前：Safari3.1及以上、Chrome8及以上、Firefox4及以上、Opera10及以上浏览器均支持该属性。2旋转使用rotate方法，在参数中加入角度值，角度值后跟代表角度单位的“deg”文字，旋转方向为顺时针方向。变换：旋转（45度）；3Zoom使用scale方法实现文本或图片的缩放处理，在参数中指定缩放比例。transform:scale(0.5);//减半(1)可以分别指定元素的水平放大倍数和垂直放大倍数。次。4Tilt使用skew方法实现文本或图片的倾斜处理，在参数中指定水平方向的倾斜角度和垂直方向的倾斜角度。transform:skew(30deg,30deg);//水平方向倾斜30度，垂直方向倾斜30度。(1)只用一个参数，省略另一个参数。在这种情况下，视为仅在水平方向倾斜，而在垂直方向不倾斜。变换：倾斜（30度）；5移动使用translate方法移动文本或图片，在参数中指定水平方向的移动距离和垂直方向的移动距离。变换：平移（50px，50px）；//水平移动50px，垂直移动50px(1)只用了一个参数，省略了另一个参数。在这种情况下，就认为只横向移动，纵向不移动。变换：翻译（50px）；6对一个元素transform使用多种变形方式：translate(150px,200px)rotate(45deg)scale(1.5);7使用transform方法对文字或图片进行变形时指定变形的参考点此时以元素的中心点为参考点进行变形。transform-origin属性使用此属性来更改转换的起点。变换：旋转（45度）；变换原点：左下角；//修改元素左下角的参考点(1)指定属性值参考点在元素水平方向的位置：left,center,right参考点在元素垂直方向的位置：top,center,bottom83D变形函数(1)Rotation使用rotateX方法、rotateY方法、rotateZ方法使元素绕X轴、Y轴、Z轴旋转，并将角度值添加到参数中,和角度值后面可以跟代表角度单位的deg文字，旋转方向为顺时针方向。变换：旋转X（45度）；变换：旋转Y（45度）；变换：旋转Z（45度）；变换：旋转X（45度）旋转Y（45度）旋转Z（45度）；变换：缩放（0.5）旋转Y（45度）旋转Z（45度）；(2)缩放使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴缩放，在参数中指定缩放比例。变换：scaleX（0.5）；变换：scaleY(1)；变换：scaleZ(2)；转换：scaleX(0.5)scaleY(1)；变换：缩放（0.5）旋转Y（45度）；方法，skewY方法使元素在X轴和Y轴上顺时针倾斜（没有skewZ方法），在参数transform中指定倾斜的角度：skewX(45deg)；变换：偏斜（45度）；(4)move分别使用translateX方法、translateY方法、translateZ方法分别在X轴、Y轴、Z轴方向移动元素，并将移动距离加入参数。变换：translateX（50px）；变换：translateY（50px）；变换：translateZ（50px）；9变换矩阵每一种变换方法后面都有对应的矩阵。(1)计算2D变形(3X3矩阵)这个2D变形矩阵可以写成matrim(a,b,c,d,e,f)，a~f都代表一个数，用来决定如何进行变形处理。(2)Translated2Dmatrix//一致效果：右移150px，下移150pxtransform:matrix(1,0,0,1,150,150);变换：平移（150px，150px）；(3)计算3D变形3D缩放和变形变换使用的4X4矩阵：matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);//效果是一致的：X轴方向缩小了五分之一，Y轴方向缩小了一半。变换：scale3d(0.8,0.5,1);变换：matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);(4)可以通过矩阵进行多次变形处理。将所需的变形矩阵相乘得到新的变形矩阵即可实现该处理。
