CSS圖片移動后翻轉(zhuǎn)是一種常見的網(wǎng)頁設(shè)計技巧，它可以使圖片更加生動、有趣、具有立體感。以下是詳細(xì)的css代碼介紹：

img {
position: absolute;
top: 100px;
left: 100px;
transform-origin: center;
transition: transform 0.5s;
}
img:hover {
transform: translate(50px, 50px) rotate(180deg);
}

首先，我們需要使用CSS的絕對定位(Position:absolute)來使圖片具有移動性。通過top和left屬性，我們可以使圖片出現(xiàn)在指定的位置。

我們接下來需要使用CSS的transform-origin屬性來設(shè)置翻轉(zhuǎn)點。我們將其設(shè)置為中心點(center)，這樣可以使圖片圍繞中心旋轉(zhuǎn)。

我們將圖片移動并翻轉(zhuǎn)的動作放在:hover事件里。我們使用CSS的transform屬性來進(jìn)行移動和翻轉(zhuǎn)。

translate（50px，50px）表示在橫坐標(biāo)方向上和縱坐標(biāo)方向上同時移動50px。rotate（180度）表示將圖片沿著中心點旋轉(zhuǎn)180度。

transition屬性則是用來設(shè)置圖片移動和翻轉(zhuǎn)的過渡效果。我們設(shè)置其過渡時間為0.5s，這樣可以讓圖片的移動和翻轉(zhuǎn)更平滑自然。

通過以上的CSS代碼，我們可以輕松實現(xiàn)圖片的移動和翻轉(zhuǎn)，使頁面更加生動有趣，增強用戶體驗。