CSS3中可以使用rotate
屬性來實(shí)現(xiàn)圖片的持續(xù)旋轉(zhuǎn),以下是一個(gè)簡(jiǎn)單的示例代碼:
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .img-rotate { animation: spin 2s linear infinite; }
在這個(gè)示例中,我們定義了一個(gè)名為spin
的動(dòng)畫,它會(huì)在2秒內(nèi)將圖片從0度旋轉(zhuǎn)到360度,我們將這個(gè)動(dòng)畫應(yīng)用到.img-rotate
類上,并設(shè)置動(dòng)畫為無限次循環(huán),這樣,圖片就會(huì)持續(xù)不斷地旋轉(zhuǎn)了。
如果你想要改變旋轉(zhuǎn)的速度,可以調(diào)整animation
屬性中的2s
值,讓它變得更長(zhǎng)或更短,你也可以調(diào)整transform: rotate()
函數(shù)中的角度值,來控制圖片旋轉(zhuǎn)的度數(shù)。
在使用CSS3實(shí)現(xiàn)圖片旋轉(zhuǎn)時(shí),需要考慮到不同瀏覽器對(duì)CSS3的支持程度可能會(huì)有所不同,在使用之前***好先測(cè)試一下你的代碼在不同瀏覽器中的表現(xiàn)。