許多網站都需要使用平移效果來使頁面更加生動。在網站設計中，使用CSS編寫平移是非常簡單的。既可以通過使用CSS的屬性“position”進行絕對定位，也可以使用CSS3的transform屬性:

/* 使用position屬性 */
.box {
position: absolute;
left: 30px;
top: 50px;
}
/* 使用transform屬性 */
.box {
transform: translate(30px, 50px);
}

在上述代碼中，.box類是要進行平移的元素。使用位置屬性，我們可以使用左、右、上、下屬性分別定義元素相對于父元素的位置。而使用transform屬性，我們在其參數中指定想要平移的橫向和縱向距離。同時，我們也可以使用其中的translateX和translateY屬性單獨平移元素。

平移效果并不只適用于圖片或文字，你甚至可以使用它來制作響應式效果。如下所示，下列代碼中的.box將在屏幕尺寸變小時沿著頁面底部移動。

/* 適配響應式設計 */
@media screen and (max-width: 768px) {
.box {
position: absolute;
bottom: 0;
transform: translate(0, 50px);
}
}

在上述代碼中用到了一個名為@media的CSS屬性，表示當前CSS樣式適應的設備和窗口大小。在本例中，它只適用于小于或等于768px寬度的設備，當觸發這一媒體查詢時，類.box會沿著頁面底部移動50px。

CSS的平移效果可以實現設計師們所需要的不同結果。無論是響應式設計，制作網頁導航或是創建頁面動畫，它都是一個十分有用的工具。