CSS中的translate()函數是用來實現元素在平面內的平移功能的。它的語法如下:
transform: translate(x,y);
其中x和y的值指定了元素沿著x軸和y軸方向平移的距離。如果x的值是正數,元素向右移動;如果x的值是負數,元素向左移動。如果y的值是正數,元素向下移動;如果y的值是負數,元素向上移動。
如果只在x方向或y方向移動,可以省略y或x的值:
transform: translate(x); /* 只在x方向移動 */ transform: translate(,y); /* 只在y方向移動 */
如果要同時在x和y方向移動,可以指定兩個值:
transform: translate(x,y);
如果要讓一個元素相對于自身位置移動,可以使用translate()函數和position屬性配合使用。例如,將一個絕對定位的div元素在自身內部向右下角移動50px:
div { position: absolute; top: 50%; left: 50%; transform: translate(50px, 50px); }
需要注意的是,translate()函數可以與其他CSS3變換函數一起使用,比如rotate、scale等。這樣可以實現更加自由、生動、靈活的效果。