Question

位移的基本使用

Answer 1

位移样式名: transform: translate
水平位移: transform: translateX
垂直位移: transform: translateY
※注意:
▶ 水平 方向为 x轴 ;右侧为正方向,左侧为负方向( 右正左负 )
▶ 垂直 方向为 y轴 ;下方为正方向,上方为负方向( 下正上负 )
▶transform属性对于行内元素无效
▶添加transform属性的盒子可以提高盒子的层级,保留原来的位置--->类似于相对定位特点(占位,不脱标)
▶translate(只有一个值) = translateX()
▶过渡transition:时长;给需要变换的元素本身设置

示例:
transform: translateX(100px);
transform: translateX(-100px);
transform: translateY(50px);
transform: translateY(-50px);

示例:
transform: translateX(50%);
transform: translateX(-50%);
transform: translateY(50%);
transform: translateY(-50%);
※注意:百分比取值参考的是盒子自身大小