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

1. 使用transform屬性
2. 使用animation屬性

CSS讓圖片旋轉(zhuǎn)的設(shè)置方法

CSS是一種強(qiáng)大的樣式表語(yǔ)言，可以用來(lái)控制網(wǎng)頁(yè)的外觀和布局，旋轉(zhuǎn)圖片是CSS中的一個(gè)常見應(yīng)用，如何用CSS讓圖片旋轉(zhuǎn)呢？

使用transform屬性

CSS中的transform屬性可以用來(lái)對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)等操作，要讓圖片旋轉(zhuǎn)，可以設(shè)置transform屬性的值為rotate，并指定旋轉(zhuǎn)的角度，要將圖片旋轉(zhuǎn)45度，可以寫成這樣：

img {
  transform: rotate(45deg);
}

使用animation屬性

除了使用transform屬性外，還可以使用CSS中的animation屬性來(lái)讓圖片旋轉(zhuǎn)，通過(guò)定義動(dòng)畫的關(guān)鍵幀，可以指定圖片在不同時(shí)間點(diǎn)的狀態(tài)，從而實(shí)現(xiàn)旋轉(zhuǎn)效果，以下代碼可以讓圖片從0度旋轉(zhuǎn)到360度：

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
img {
  animation: rotate 2s linear;
}

在這個(gè)例子中，我們定義了一個(gè)名為rotate的動(dòng)畫，并在2秒的時(shí)間內(nèi)將圖片從0度旋轉(zhuǎn)到360度，linear表示動(dòng)畫的速度是勻速的。

需要注意的是，使用CSS讓圖片旋轉(zhuǎn)時(shí)，可能需要考慮瀏覽器兼容性和性能優(yōu)化等問(wèn)題，在實(shí)際應(yīng)用中，需要根據(jù)具體情況進(jìn)行調(diào)整和優(yōu)化。