【css教程】之transform的基本用法

用法:

1.移动    2.旋转   3.缩放   4.倾斜   5.元素的基点   6.合写

1.移动：translate

一个值：transform:translate(100px)

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

translateX(x):沿 X 轴位移

translateY(y):沿 Y 轴位移

translateZ(z):沿 Z 轴位移

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

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

translate(x,y) :沿 X Y 轴位移

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

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

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

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

rotate():2D旋转

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

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

rotateZ():沿着Z轴3D旋转.要在其父级配合transform-style: preserve-3d;使用rotate3D(x,y,z,n deg): 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: 10px 20px

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

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

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

角垂直方向的距离。

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

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

想了解更多，请访问齐创互联,需要网站建设,浏览快速建站模板快速建站
点击联系客服，联系电话：15811653920 联系人: 丁生.