CSS中的transform的简单使用

transform

1.旋转:transform: rotate(45deg)

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

2.缩放:transform: scale(0.5) 或者 transform: scale(0.5,0.4)

一个参数:表示水平跟垂直方向同时缩放0.5,等同于scaleX(0.5)
两个参数:第一个参数表示水平方向的缩放比例,第二个参数表示垂直方向的缩放比例
scaleY(0.3):表示垂直方向的缩放比例
scaleZ(0.3):表示Z轴方向缩放比例
scale3d(0.5,0.3,0.4):表示3D三个方向缩放的比例,顺序为X,Y,Z

3.倾斜:transform:skew(30deg) 或者 transform:skew(30deg,30deg)

一个参数:表示水平方向的倾斜角度,等同于skewX(30deg)
两个参数:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
skewY:表示垂直方向的倾斜角度

4.移动:transform:translate(500px) 或者 transform:translate(500px,200px)

一个参数:表示水平方向移动的位移,等同于translateX(500px)
两个参数:第一个参数表示水平方向移动的位移,第二个参数表示垂直方向移动的位移
translateY(200px):表示垂直方向移动的位移
translateZ(10px):表示Z轴方向移动的位移
translate3d(10px,20px,10px):表示3D三个方向移动的位移,顺序为X,Y,Z

5.元素的基点:transform-origin: 10px 20px

在对文字或者图片进行变形时,默认是以元素的中心为基点进行的,使用transform-origin属性,可以改变元素的基点。
有两个参数:第一个表示距离元素左上角水平方向的距离,第二个表示距离元素左上角垂直方向的距离。当然,第一个参数可以设置为left、center、right,第二个参数可以设置为top、center、bottom。

6.组合使用

一般格式: transform:rotate(45deg) scale(0.3) skew(30deg,30deg) translate(100px 100px)
顺序依次为:rotete、scale、skew、translate

猜你喜欢

转载自blog.csdn.net/news_out/article/details/86065409