translate()

該translate() CSS函數在水平和/或垂直方向上重新定位元素。

這種變換的特點是二維矢量。其坐標定義元素在每個方向上的移動量。

語法

該translate()函數被接受一個或兩個值。

translate(tx)

translate(tx, ty)

可能值

tx——表示平移矢量的橫坐標的值。

ty——表示平移矢量的縱坐標的值。如果未指定，則其默認值為0。例如，translate(2)相當于translate(2, 0)。

Cartesian coordinates on ?2

Homogeneous coordinates on ??2

Cartesian coordinates on ?3

Homogeneous coordinates on ??3

A translation is not a linear transform in ?2 and cannot be represented using a matrix in the Cartesian coordinate system.

10tx01ty001

10tx01ty001

100tx010ty00100001

| 1 0 0 1 tx ty |

實例

使用單軸平移

HTML

StaticMovedStatic

CSS

div {

width: 60px;

height: 60px;

background-color: skyblue;

}

.moved {

/* Equivalent to translateX(10px) */

transform: translate(10px);

background-color: pink;

}

結果

結合y軸和x軸平移

HTML

StaticMovedStatic

CSS

div {

width: 60px;

height: 60px;

background-color: skyblue;

}

.moved {

transform: translate(10px, 10px);

background-color: pink;

}

結果

另見

transform

總結

以上是生活随笔為你收集整理的css translate 坐标,translate()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。