CSS3中的平移是一種常用的布局方式。它可以通過(guò)將元素從一個(gè)位置移動(dòng)到另一個(gè)位置來(lái)改變頁(yè)面的布局。

/* 移動(dòng)元素 */
.move {
position: relative;
left: 50px;
}
/* 滑動(dòng)元素 */
.slide {
transform: translateX(50px);
}
/* 淡入元素 */
.fade {
opacity: 0;
transition: opacity .5s ease-in-out;
}
.fade:hover {
opacity: 1;
}

在上面的代碼中，我們定義了三種不同的平移方式：

• 移動(dòng)元素：這種方式是通過(guò)使用position和left屬性來(lái)實(shí)現(xiàn)的。我們將元素的位置向左移動(dòng)了50像素。
• 滑動(dòng)元素：這種方式使用了CSS3中的transform屬性。我們使用translateX函數(shù)將元素向右移動(dòng)了50像素。
• 淡入元素：這種方式是通過(guò)使用opacity屬性和過(guò)渡效果來(lái)實(shí)現(xiàn)的。我們將元素的透明度設(shè)置為0，并在:hover偽類(lèi)中將其透明度設(shè)置為1。

使用這些平移方式可以有效地改變頁(yè)面的布局。我們可以使用它們來(lái)創(chuàng)建有趣的動(dòng)畫(huà)效果，或者在響應(yīng)式設(shè)計(jì)中實(shí)現(xiàn)更好的布局。