位移样式名:transform: translate
水平位移:transform: translateX
垂直位移:transform: translateY
※注意:
▶水平方向为x轴;右侧为正方向,左侧为负方向(右正左负)
▶垂直方向为y轴;下方为正方向,上方为负方向(下正上负)
▶transform属性对于行内元素无效
▶添加transform属性的盒子可以提高盒子的层级,保留原来的位置--->类似于相对定位特点(占位,不脱标)
▶translate(只有一个值) = translateX()
▶过渡transition:时长;给需要变换的元素本身设置
transform像素单位取值
示例:
transform: translateX(100px);
transform: translateX(-100px);
transform: translateY(50px);
transform: translateY(-50px);
【需求:鼠标悬停于box上时,box向右移动100像素,向下移动50像素】
transform: translateX(100px) translateY(50px);
连写写法∨
transform: translate(100px,50px);
transform百分比取值
示例:
transform: translateX(50%);
transform: translateX(-50%);
transform: translateY(50%);
transform: translateY(-50%);
※注意:百分比取值参考的是盒子自身大小
位移在绝对定位元素居中的应用
位移的百分比取值在绝对定位元素居中中的应用
