CSS3 中的translate
屬性通常用于移動元素的位置,它可以通過指定 x 軸和 y 軸方向上的距離來實現(xiàn)移動。下面是該屬性的示例代碼:
div { transform: translate(30px, 50px); }
上面的代碼將會把div
元素向右移動 30 像素,向下移動 50 像素。
此外,translate
屬性還可以通過百分比或 em 值來指定距離:
div { transform: translate(50%, 75%); /* 或 */ transform: translate(2em, 3em); }
上面的代碼將會把div
元素向右移動它的寬度的 50%,向下移動它的高度的 75%,也就是說,移動距離會隨著元素寬高的變化而變化。
此外,translate
屬性還可以接受負值,從而在相反方向上移動元素的位置:
div { transform: translate(-20px, -30px); }
上面的代碼將會把div
元素向左移動 20 像素,向上移動 30 像素。