CSS樣式平移是一種非常有用的技術，在設計網站時可以很好地實現視覺效果的調整和元素的布局調整。下面介紹一下如何使用CSS實現樣式平移。

/* 設置元素的初始樣式 */
.position {
position: absolute; /* 絕對定位，用于實現元素平移 */
top: 50px; /* 元素從頂部向下移動50像素 */
left: 50px; /* 元素從左側向右移動50像素 */
}
/* 鼠標移上去時元素向右移動10像素 */
.position:hover {
left: 60px;
}

在上面的代碼中，我們首先給元素設置了一個初始位置，用到了CSS中的絕對定位。接下來，我們使用:hover選擇器來實現當鼠標移上去時元素向右移動的效果。

如果想要實現元素位置的動態平移效果，可以使用CSS3中的transition屬性來設置過渡效果。例如：

/* 設置元素的初始樣式以及過渡效果 */
.position2 {
position: absolute; /* 絕對定位，用于實現元素平移 */
top: 100px; /* 元素從頂部向下移動100像素 */
left: 100px; /* 元素從左側向右移動100像素 */
transition: all 0.5s ease-in-out; /* 設置過渡效果，0.5秒內平滑改變所有屬性，使用緩動函數實現平滑過渡 */
}
/* 鼠標移上去時元素向右移動10像素 */
.position2:hover {
left: 110px;
}

上面的代碼中，我們在元素的初始樣式中設置了過渡效果，當鼠標移上去時，使用:hover選擇器來改變元素的left屬性，從而實現動態平移效果。

除了使用left和top屬性來實現平移效果，我們還可以使用translate()函數來實現平移。例如：

/* 設置元素的初始樣式以及過渡效果 */
.position3 {
position: absolute; /* 絕對定位，用于實現元素平移 */
top: 150px; /* 元素從頂部向下移動150像素 */
left: 150px; /* 元素從左側向右移動150像素 */
transition: all 0.5s ease-in-out; /* 設置過渡效果，0.5秒內平滑改變所有屬性，使用緩動函數實現平滑過渡 */
}
/* 鼠標移上去時元素向右移動10像素 */
.position3:hover {
transform: translateX(10px); /* 使用translate()函數實現平移效果 */
}

上面的代碼中，我們使用了transform中的translateX()函數來實現平移效果。當鼠標移上去時，使用:hover選擇器來改變元素的這個屬性，從而實現動態平移效果。