css的Transform详解

Transform字面上就是变形，改变的意思。

在CSS3中transform主要包括以下几种：

• 旋转rotate
• 扭曲skew
• 缩放scale
• 移动translate
• 矩阵变形matrix。

语法

transform ： none |[]* 也就是： transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号(“，”)隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

旋转rotate

rotate() ：通过指定的角度参数对原元素指定一个2D rotation(2D 旋转)，需先有transform-origin属性的定义。transform-origin定义的是旋转的基点(默认 transform-origin:50% 50%;)，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

移动translate

移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)；translateX(x)仅水平方向移动(X轴移动)；translateY(Y)仅垂直方向移动(Y轴移动)，具体使用方法如下：

translate([, ]) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体。如transform:translate(100px,20px):

translateX() ： 通过给定一个X方向上的数目指定一个translate。

translateY() ：通过给定一个Y方向上的数目指定一个translate。

缩放scale

缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)；scaleX(x)元素仅水平方向缩放(X轴缩放)；scaleY(y)元素仅垂直方向缩放(Y轴缩放)，但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。下面我们具体来看看这三种情况具体使用方法：

scale([, ])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。如：transform:scale(2,1.5):

扭曲skew

扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)；skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)；skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)，具体使用如下：

skew( [, ]) ：X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg):

skewX() ： 按给定的角度沿X轴指定一个skew transformation(斜切变换)。skewX是使元素以其中心为基点，并在水平方向(X轴)进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)

skewY() ： 按给定的角度沿Y轴指定一个skew transformation(斜切变换)。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向(Y轴)扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY(10deg)

矩阵matrix

matrix(, , , , , ) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。无论是旋转还是拉伸什么的，本质上都是应用的matrix()方法实现的(修改matrix()方法固定几个值)。

用过transform旋转的人可以发现了，其默认是绕着中心点旋转的，而这个中心点就是transform-origin属性对应的点，也是所有矩阵计算的一个重要依据点。

写法：transform:matrix(a,b,c,d,e,f)

在矩阵中：

结合坐标轴计算结果位：

偏移(translate)

利用矩阵实现transform：translate(30px,30px);

等同于transform：matrix(1，0，0，1，30，30)

现在，我们根据这个矩阵偏移元素的中心点，假设是(0, 0)，即x=0, y=0。

于是，变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30, y坐标就是bx+dy+f = 0*0+1*0+30 =30.

于是，中心点坐标从(0, 0)变成了→(30, 30)。对照上面有个(30, 30)的白点图，好好想象下，原来(0,0)的位置，移到了白点的(30, 30)处，

实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意：translate, rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。

这里只需要关心后面两个参数就可以了，前面4个参数在偏移上是不需要考虑的。

旋转(rotate)

利用矩阵实现transform：rotate(α);　　//将元素旋转α度

等同于transform：matrix(cosα，sinα，-sinα，cosα，0，0)

结合矩阵公式，就有：

x'=cosα*x-sinα*y+0=cosα*x-sinα*y

y'=sinα*x+cosα*y+0=sinα*x+cosα*y

结合三角函数是可以推算出来的,

假设有一个点(x，y)，偏移之前与原点之间连线的角度是β，偏移角度是α，偏移之后的点位A'(x'，y')

A点与原点之间的长度不会变，设r，那么r就等于**√(x²+y²)，cosβ=x/√(x²+y²)，sinβ=y/√(x²+y²)**。

偏移之后：

A'的横坐标就为**x'=r*cos(α+β)=r*(cosα*cosβ-sinα*sinβ)，将上面的r、cosβ和sinβ代入化简就可以得到x'=cosα\*x-sinα\*y**；

A'的纵坐标就为y'=rsin(α+β)=r(sinαcosβ+cosαsinβ)，将上面的r、cosβ和sinβ代入化简就可以得到**y'=sinα\*x+cosα\*y**；

进而获得矩阵**matrix(cosα，sinα，-sinα，cosα，0，0)**。

缩放(scale)

利用矩阵实现transform：scale(1,1);

等同于transform：matrix(1,0,0,1,0,0)

缩放后的元素比例与原来一样，1:1, 而这几个参数中，有两个1, 这两个1就是缩放相关的参数。

其中，第一个缩放x轴，第二个缩放y轴。

用公式就很明白了，假设比例是s，则有matrix(s, 0, 0, s, 0, 0);，于是，套用公式，就有：

x' = ax+cy+e = s*x+0*y+0 = s*x;

y' = bx+dy+f = 0*x+s*y+0 = s*y;

也就是**matrix(sx, 0, 0, sy, 0, 0)，等同于scale(sx, sy);**

拉伸(skew)

利用矩阵实现transform：skew(θy，θx);

等同于**transform：matrix(1,tan(θy),tan(θx),1,0,0)**

拉伸也用到了三角函数，不过是tanθ，而且，其至于b, c两个参数相关，书写如下(注意y轴倾斜角度在前)：

matrix(1,tan(θy),tan(θx),1,0,0)

套用矩阵公式计算结果为：

' = x+y*tan(θx)+0 = x+y*tan(θx)

y' = x*tan(θy)+y+0 = x*tan(θy)+y

对应于skew(θx + "deg"，θy+ "deg")这种写法。

其中，θx表示x轴倾斜的角度，θy表示y轴，两者并无关联。

镜像对称效果

另外还可以利用矩阵实现元素的镜像对称效果 (以元素基点为原点，建立直角坐标系，对称轴为y=kx)

transform：((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0))；

现已知一是垂直，二是中心点在轴线上，因此有：

(y-y') / (x - x') = -1/ k

(x + x') / 2 * k = (y + y')/2

把x'和y'提出来，就有：

x' = (1-k*k)/(k*k+1) *x + 2k/(k*k+1) *y;

y' = 2k/(k*k+1) *x + (k*k-1)/(k*k+1)*y;

再结合矩阵公式：

x' = ax+cy+e;

y' = bx+dy+f;

就可以得到：

a = (1-k*k)/(k*k+1);

b = 2k/(k*k+1);

c = 2k/(k*k+1);

d = (k*k-1)/(k*k+1);

改变元素基点transform-origin

前面我们多次提到transform-origin这个东东，他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。下面我们主要来看看其使用规则：

transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

浏览器私有属性

-moz代表firefox浏览器私有属性；

-ms代表IE浏览器私有属性；

-webkit代表chrome、safari私有属性；

-o代表Opera私有属性

示例

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); 		/* IE 9 */
-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}

参考链接1
参考连接2