在網(wǎng)站設(shè)計(jì)中，倒轉(zhuǎn)圖片是一種常見(jiàn)的效果。在CSS3中，通過(guò)使用transform屬性和rotate()函數(shù)，可以非常容易地實(shí)現(xiàn)這種效果。

假設(shè)我們有一個(gè)簡(jiǎn)單的HTML結(jié)構(gòu)：

<div class="flip-image">
<img src="image.jpg" alt="Flip Image">
</div>

我們給這個(gè)div設(shè)置了一個(gè)類名“flip-image”，并在里面放了一個(gè)img標(biāo)簽。接下來(lái)，我們通過(guò)CSS3使用transform屬性和rotate()函數(shù)來(lái)翻轉(zhuǎn)這張圖片：

.flip-image:hover img {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

在這里，我們使用了:hover偽類，表示鼠標(biāo)滑過(guò)時(shí)觸發(fā)效果。我們把transform屬性和rotate()函數(shù)應(yīng)用到了img標(biāo)簽，通過(guò)rotateY函數(shù)加上180度的旋轉(zhuǎn)角度，使圖片水平翻轉(zhuǎn)。同時(shí)，我們也使用了-vendor前綴“-webkit-”，以提高瀏覽器兼容性。

最終，我們就可以通過(guò)鼠標(biāo)移動(dòng)來(lái)讓圖片倒轉(zhuǎn)了。更多CSS3的transform屬性細(xì)節(jié)，請(qǐng)參考官方文檔。