transform 转换

1.基本用法

transform，基本格式如下：

transform: [转换函数]

 先说基本用法，transform接受一个转换函数，每个转换函数都会有不同的效果，下面是三个主要的2D转换函数

所以我们想移动当前元素的话就可以这样(往上移动 10 像素，往右移动 10 像素)： 

transform: translate(-10px, 10px);

2.指定多个转换效果

好，回忆起了基本用法之后就深入一点，如果想给当前元素配置多个转换效果怎么办，如下(向右下角移动 10 像素并顺时针旋转10°)：

transform: translate(10px, 10px) rotate(10deg);

三、transform 对文档流的影响

 如果使用transition监听基本属性，例如height或width等，其值在发生改变时就会对文档流产生影响，比如下图，鼠标悬停的div长宽变化会把其他的div给“挤开”，甚至最边上的还挤到了下一行。并且，可以长宽属性在发生变化时元素的固定点不是中心，而是左上角，当初如何把固定点换成中心可以困扰了我很久。

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    width: 120px;
    height: 120px;
}

而使用transform则不会出现这种情况，如下。因为transform只会影响当前元素的状态，达到类似position: relative;的效果，而且transform是默认基于元素的中心进行转换的，就算想改的话也可以使用transform-origin属性进行修改，具体用法非常简单，这里就不再赘述。

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    transform: scale(1.2, 1.2);
}