在網(wǎng)頁設(shè)計(jì)中，圖片的使用不僅能夠增加頁面的吸引力，而且能夠豐富頁面的內(nèi)容。而在圖片的使用過程中，圖片的效果也是非常重要的，比如圖片旋轉(zhuǎn)的效果。那么，下面就介紹一下如何使用CSS實(shí)現(xiàn)圖片旋轉(zhuǎn)的正反效果。

img{
transition: all 0.5s ease-out;
}
img:hover{
transform: rotate(360deg);
}
img.reverse{
transform: rotate(-360deg);
}

如上代碼所示，首先我們需要添加一個(gè)CSS3的過渡效果，即transition。通過transition屬性，我們可以設(shè)置元素從一種狀態(tài)過渡到另一種狀態(tài)的速度和方式。在這里，我們設(shè)置了圖片在鼠標(biāo)懸停時(shí)經(jīng)過0.5秒的漸變過渡效果。

接著，我們使用CSS3的transform屬性來實(shí)現(xiàn)圖片的旋轉(zhuǎn)效果。通過設(shè)置transform:rotate(360deg)，我們可以讓圖片在鼠標(biāo)懸停時(shí)順時(shí)針旋轉(zhuǎn)360度。這樣就實(shí)現(xiàn)了圖片旋轉(zhuǎn)的正向效果。

而要實(shí)現(xiàn)圖片旋轉(zhuǎn)的反向效果，則需要給圖片設(shè)置一個(gè)類名為reverse的樣式。在該樣式中，我們設(shè)置了transform:rotate(-360deg)，實(shí)現(xiàn)了圖片逆時(shí)針旋轉(zhuǎn)360度的效果。

通過以上步驟，我們就可以輕松地使用CSS實(shí)現(xiàn)圖片旋轉(zhuǎn)的正反效果。這不僅能夠增加頁面的視覺效果，而且也能夠讓頁面內(nèi)容更加生動(dòng)有趣。