站長資訊網(wǎng)
translate的意思為“移動(dòng)”，是css內(nèi)置的一個(gè)函數(shù)，與transform屬性配合使用，可以將元素沿著水平方向（X軸）和垂直方向（Y軸）移動(dòng)。translate的使用分為3種情況：1、“translateX(x)”，元素僅在水平方向移動(dòng)；2、“translateY(y)”，元素僅在垂直方向移動(dòng)；3、“transklate(x,y)”，元素在水平方向和垂直方向同時(shí)移動(dòng)。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計(jì)、調(diào)試、自動(dòng)化測(cè)試一體化協(xié)作工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
translate的意思為：移動(dòng)、平移、位移。
CSS transform: translate
在CSS中，translate()方法與transform屬性配合使用，可以將元素沿著水平方向（X軸）和垂直方向（Y軸）移動(dòng)。
對(duì)于位移translate()方法，我們分為3種情況：
-
translateX(x)：元素僅在水平方向移動(dòng)（X軸移動(dòng)）；
-
translateY(y)：元素僅在垂直方向移動(dòng)（Y軸移動(dòng)）；
-
transklate(x,y)：元素在水平方向和垂直方向同時(shí)移動(dòng)（X軸和Y軸同時(shí)移動(dòng)）
其中：
-
x表示元素在水平方向（X軸）的移動(dòng)距離，當(dāng)x為正時(shí)，表示元素在水平方向向右移動(dòng)（X軸正方向）；當(dāng)x為負(fù)時(shí)，表示元素在水平方向向左移動(dòng)（X軸負(fù)方向）。
-
y表示元素在水平方向（y軸）的移動(dòng)距離，當(dāng)y為正時(shí)，表示元素在垂直方向向下移動(dòng)；當(dāng)y為負(fù)時(shí)，表示元素在垂直方向向上移動(dòng)。
-
在W3C規(guī)定中，出于人的習(xí)慣是從上到下閱讀，所選取的坐標(biāo)系中x軸正方向向右，而y軸正方向向下。
-
在CSS3中，所有變形方法都是屬于transform屬性，因此所有關(guān)于變形的方法前面都要加上“tranform:”，以表示“變形”處理。這一點(diǎn)大家一定要記住。
-
單位為px、em或百分比等，x,y為百分?jǐn)?shù)時(shí)，是相當(dāng)于移動(dòng)的元素的寬+padding，高+padding的百分比。
1、translate(x, y) ：定義2D移動(dòng)轉(zhuǎn)化
x 是第一個(gè)過渡值參數(shù)，y 是第二個(gè)過渡值參數(shù)選項(xiàng)。如果未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對(duì)象進(jìn)行平移，按照設(shè)定的x,y參數(shù)值,當(dāng)值為負(fù)數(shù)時(shí)，反方向移動(dòng)物體，其基點(diǎn)默認(rèn)為元素中心點(diǎn)，也可以根據(jù)transform-origin進(jìn)行改變基點(diǎn)。
例如：
transform:translate(50px,50px):
2、translate(x)：指定X軸方向上的一個(gè)移動(dòng)
例如：
transform:translateX(50px):
3、translate(y)：指定Y軸方向上的一個(gè)移動(dòng)
例如：
transform:translateY(50px):
示例：元素在網(wǎng)頁中居中
代碼：
<html> <head> <title>元素頁面正中間居中</title> <style> html,body{ height: 100%; margin: 0; padding: 0; background-color: #2b9f6b } div{ width: 450px; height: 300px; background-color: #abcdef; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; } </style> </head> <body> <div>待居中元素</div> </body> </html>
（學(xué)習(xí)視頻分享：web前端）
