位移:
1.语法
transform:translate(x,y);
transform:translatex(n);
transform:translatey(n);
2.重点
1.沿着x和y轴移动
2.不会影响其他元素的位置
3.可以使用百分比 是对于自身元素translate:(50%,50%) 如果自身宽度为100px 移动translateX( 50%) 相当于向右边移动50px
4.对行内标签没有效果
案例:
把鼠标放在盒子上,盒子向x和y轴移动100px,当中使用了伪元素:hover
.ac:hover {
transform: translate(100px, 100px); //鼠标放在盒子上移动
}
.ac {
width: 100px;
height: 100px;
background-color: brown;
}
<div class=ac></div>
这是起始样子
鼠标放在上面的样子
让盒子垂直居中
使用定位(absolute)和移动(translate)实现盒子居中
1.实现盒子在正中央
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
2. 实现盒子垂直居中
position: absolute;
left: 50%;
top: %;
transform: translate(-50%, 0);
3.实现盒子水平居中
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);