在CSS中,可以使用transform: translateX()
屬性來實(shí)現(xiàn)水平移動,但需要注意的是,該屬性的值表示移動的像素數(shù),而不是百分比,如果想要將元素水平移動10像素,需要這樣寫:
element { transform: translateX(10px); }
element
是要移動的元素的選擇器,上述代碼表示將元素向右移動10像素,如果想要向左移動,可以將值設(shè)置為負(fù)數(shù),
element { transform: translateX(-10px); }
transform: translateX()
屬性還可以與其他CSS屬性結(jié)合使用,例如transition
和animation
,以實(shí)現(xiàn)更復(fù)雜的動畫效果,可以使用transition
屬性來設(shè)置元素移動的過渡效果:
element { transform: translateX(0); transition: transform 1s; } element:hover { transform: translateX(10px); }
上述代碼表示當(dāng)鼠標(biāo)懸停在元素上時,元素會向右移動10像素,并在1秒內(nèi)完成移動過程。