今天我發(fā)現(xiàn)了一張很有趣的圖片，在我的網(wǎng)頁(yè)上添加了CSS3旋轉(zhuǎn)效果，讓這張圖片更加動(dòng)感和吸引人。下面我就來(lái)介紹一下這個(gè)CSS3旋轉(zhuǎn)的效果。

.rotate-img {
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.rotate-img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

首先，我們給圖片的類名設(shè)為.rotate-img，然后在CSS樣式中添加了-webkit-transition和transition屬性。這兩個(gè)屬性用于設(shè)置圖片旋轉(zhuǎn)動(dòng)畫的過(guò)渡時(shí)間以及過(guò)渡效果。在這里，我設(shè)置了過(guò)渡時(shí)間為0.8秒，過(guò)渡效果為ease-in-out（平滑緩慢）。

接下來(lái)，我們?cè)?hover偽類中添加了-webkit-transform和transform屬性，用于設(shè)置在鼠標(biāo)懸停時(shí)圖片的旋轉(zhuǎn)效果。在這里，我設(shè)置了旋轉(zhuǎn)角度為360度，表示圖片將繞中心點(diǎn)順時(shí)針旋轉(zhuǎn)一圈，完成動(dòng)畫效果。

這個(gè)CSS3旋轉(zhuǎn)動(dòng)畫效果非常簡(jiǎn)單，只需要添加兩個(gè)屬性就可以實(shí)現(xiàn)了。如果你也想讓你的網(wǎng)頁(yè)更加生動(dòng)有趣，不妨嘗試一下這個(gè)效果吧！