9.15日音讯，开云网络谈CSS中transform属性

9.15日音讯，开云网络谈CSS中transform属性。通过transform，可以让元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。如果该属性有一个非none值,将会产生一个层叠上下文.在这种情况下对象将作为它包含的position:fixed元素的包含块（acontainingblock）。

1.移动：translate

一个值：transform:translate(100px)

表示水平方向移动的位移，等同于translateX(100px)

translateX(x):沿X轴位移

translateY(y):沿Y轴位移

translateZ(z):沿Z轴位移

两个值：transform:translate(100px,200px)

第一个表示水平方向移动的位移，第二个表示垂直方向移动的位移

translate(x,y):沿XY轴位移

三个值：translate3d(10px,20px,10px)

表示3D三个方向移动的位移，顺序为X,Y,Z

2.旋转：transform:rotate(ndeg)(其中n为旋转度数)

以角度(deg)为单位，正数是顺时针旋转，负数是逆时针旋转

rotate():2D旋转

rotateX():沿着X轴3D旋转

rotateY():沿着Y轴3D旋转

rotateZ():沿着Z轴3D旋转.要在其父级配合transform-style:preserve-3d;使用

rotate3D(x,y,z,ndeg):3D旋转，接受四个参数，x,y,z介于0-1之间，n是旋转的度数。元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是rotate3D。

3.缩放：scale

一个值：transform:scale(1)

表示水平跟垂直方向同时放大1倍

两个值：transform:scale(1,2)

第一个参数表示水平方向的缩放比例，第二个参数表示垂直方向的缩放比例,

等同于scaleX(1)和scaleY(2)

三个值：scale3d(0.5,0.3,0.4)

表示3D三个方向缩放的比例，顺序为X,Y,Z轴

数值为负时为缩小

4.倾斜：skew

一个值：transform:skew(10deg)

表示水平方向的倾斜角度，等同于skewX(10deg)

skewX:表示水平方向的倾斜角度

skewY：表示垂直方向的倾斜角度

两个值：transform:skew(10deg,20deg)

第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

5.元素的基点：transform-origin:10px20px

值得注意的是:在进行以上的变形操作时，默认都是以元素的中心为基点.

要想改变基点则可以使用transform-origin属性

有两个参数：第一个表示距离元素左上角水平方向的距离，第二个表示距离元素左上角垂直方向的距离。

第一个参数可以设置为left、center、right，第二个参数可以设置为top、center、bottom。

6.合写:transform:rotate(45deg)scale(1)skew(40deg,30deg)translate(100px200px)