transform: 对元素进行变形
transform有几个值:
- translate 移动
- scale 缩放
- rotate 旋转
- skew 缩放
这几个属性的具体使用方法:
一、translate 移动
translate([ , ])
通过矢量[tx,ty]指定一个2D translation,tx是第一个过渡值参数,ty是第二个过渡值参数选项。当值为负数时,反方向移动。当值为正数时,顺时针移动。
如transform:translate(100px,20px);
二、scale 缩放
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是x轴和y轴同时缩放),其中心点就是元素的中心位置,缩放基数为1,如果值大于1就放大,反之其值小于1,元素缩小。
三、rotate 旋转
transform: rotate(45deg);
共一个参数“角度”,单位deg为度,正数为顺时针旋转,负数为逆时针旋转。