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);
}