本文目錄導(dǎo)讀：

1. 使用CSS3的transform屬性
2. 使用CSS動畫

CSS圖片旋轉(zhuǎn)的實現(xiàn)方法

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要展示一些圖片，并且希望這些圖片能夠旋轉(zhuǎn)，以增加一些互動性和趣味性，怎樣使用CSS來實現(xiàn)圖片的旋轉(zhuǎn)呢？

使用CSS3的transform屬性

CSS3的transform屬性可以實現(xiàn)圖片的旋轉(zhuǎn)，其中rotate函數(shù)可以用來旋轉(zhuǎn)圖片，我們可以將需要旋轉(zhuǎn)的圖片元素作為選擇器，然后應(yīng)用transform屬性來實現(xiàn)旋轉(zhuǎn)效果。

將圖片旋轉(zhuǎn)45度：

img {
  transform: rotate(45deg);
}

使用CSS動畫

除了使用transform屬性，我們還可以使用CSS動畫來實現(xiàn)圖片的旋轉(zhuǎn)，我們需要定義動畫的樣式，然后應(yīng)用動畫到圖片元素上，在動畫中，我們可以使用from和to關(guān)鍵字來定義動畫的起始狀態(tài)和結(jié)束狀態(tài)，其中可以包含旋轉(zhuǎn)的角度。

將圖片從0度旋轉(zhuǎn)到360度：

img {
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

就是用CSS實現(xiàn)圖片旋轉(zhuǎn)的兩種方法，我們可以根據(jù)具體的需求和效果來選擇使用哪種方法，我們也可以結(jié)合其他CSS特性和技術(shù)來實現(xiàn)更加豐富和復(fù)雜的旋轉(zhuǎn)效果。