在CSS3中，我們可以使用translate()方法將元素沿著水平方向（X軸）和垂直方向（Y軸）移動。
對於位移translate()方法，我們分為3種情況：
（1）translateX(x)：元素僅在水平方向移動（X軸移動）；
（2）translateY(y)：元素僅在垂直方向移動（Y軸移動）；
（3）transklate(x,y)：元素在水平方向和垂直方向同時移動（X軸和Y軸同時移動）；
語法：
transform:translateX(x);
說明：
在CSS3中，所有變形方法都是屬於transform屬性，因此所有關於變形的方法前面都要加上“tranform:”，以表示“變形”處理。這一點大家一定要記住。
x表示元素在水平方向（X軸）的移動距離，單位為px、em或百分比等。
當x為正時，表示元素在水平方向向右移動（X軸正方向）；當x為負時，表示元素在水平方向向左移動（X軸負方向）。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*設置原始元素樣式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*設置當前元素樣式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateX(20px);
-webkit-transform:translateX(20px); /*兼容-webkit-引擎浏覽器*/
-moz-transform:translateX(20px); /*兼容-moz-引擎浏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“transform:translateX(20px);”表示元素在水平方向向右位移20px。如果把20px改為-20px，則元素在水平方向向左位移20px，在浏覽器預覽效果如下：
語法：
tranform:translateY(y)
說明：
y表示元素在水平方向（y軸）的移動距離，單位為px、em或百分比等。
當y為正時，表示元素在垂直方向向下移動；當y為負時，表示元素在垂直方向向上移動。
很多人看到這就疑惑了：站長，有沒有搞錯呀？當y為正時，表示元素應該在垂直方向向上移動；而當y為負時，表示元素在垂直方向向下移動。這樣才對呀！
很遺憾告訴你，你錯了。在W3C規定中，出於人的習慣是從上到下閱讀，所選取的坐標系為下圖中的第2種坐標系，因此x軸正方向向右，而y軸正方向向下。而你所想到的坐標系應該是下圖中的第1種坐標系，這種坐標系是“數學形式”的坐標系，只適合在數學應用上。大家一定要搞清楚這一點！
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*設置原始元素樣式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*設置當前元素樣式*/
#current
、 {
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateY(20px);
-webkit-transform:translateY(20px); /*兼容-webkit-引擎浏覽器*/
-moz-transform:translateY(20px); /*兼容-moz-引擎浏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
大家在在線測試中將20px改為-20px看看實際效果如何。
語法：
tranform:translate(x,y)
說明：
x表示元素在水平方向（x軸）的移動距離，y表示元素在水平方向（y軸）的移動距離。
注意，Y是一個可選參數，如果沒有設置Y值，則表示元素僅僅沿著X軸正方形移動。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*設置原始元素樣式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*設置當前元素樣式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translate(20px,40px);
-webkit-transform:translate(20px,40px); /*兼容-webkit-引擎浏覽器*/
-moz-transform:translate(20px,40px); /*兼容-moz-引擎浏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
其實，單純地對某個元素設置位移是沒有太多實際的意義。位移translate()方法一般都是結合CSS3動畫一起使用，從而實現上下左右移動的動畫效果。
對於移動動畫效果，使用jQuery的animate()方法也可以實現，不過jQuery實現位移比CSS3實現來得麻煩，這是因為jQuery要想實現移動動畫效果，對位移的元素還得必須設置position屬性。但是CSS3的translate()方法則不用那麼麻煩。
在後面的章節中，我們給大家講解了CSS3動畫之後，再結合CSS3變形這一章的各種方法進行綜合實踐。