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