css中transform基本用法

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)

posted @ 2021-11-14 16:00  絮行  阅读(5362)  评论(0编辑  收藏  举报