CSS鼠標(biāo)經(jīng)過圖片翻轉(zhuǎn)是一種常見的效果，在網(wǎng)頁設(shè)計中經(jīng)常使用。下面是相關(guān)的代碼實現(xiàn)。

<style>
.image{
width: 300px;
height: 200px;
position: relative;
perspective: 1000px;
}
.image img{
width: 100%;
height: 100%;
position: absolute;
transition: transform 1s;
transform-origin: center;
}
.image:hover img{
transform: rotateY(180deg);
}
</style>
<div class="image">
<img src="image.jpg" alt="image" />
<img src="image-back.jpg" alt="image-back" />
</div>

上面的代碼說明了如何實現(xiàn)鼠標(biāo)經(jīng)過圖片翻轉(zhuǎn)效果。首先，在樣式中定義一個包含兩張圖片的容器，設(shè)置容器的寬度和高度。容器需要設(shè)置position屬性為relative，并添加perspective屬性（表示觀察者到正交投影面的距離）。

然后，在子元素img樣式中設(shè)置絕對定位、寬度和高度，并添加過渡效果（transition）和轉(zhuǎn)換原點（transform-origin）。最后，在容器的:hover偽類中（表示鼠標(biāo)經(jīng)過容器時觸發(fā)的效果）將img的轉(zhuǎn)換角度設(shè)置為180度，即可實現(xiàn)翻轉(zhuǎn)效果。

需要注意的是，在容器中添加兩張圖片，第一張圖片是正面圖片，第二張圖片是背面圖片。背面圖片應(yīng)該旋轉(zhuǎn)180度，確保在翻轉(zhuǎn)過程中正反面都能夠正確顯示。