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

1. 使用CSS3的transform屬性
2. 使用CSS的animation屬性
3. 使用SVG和CSS的結(jié)合
4. 使用JavaScript和CSS的結(jié)合

CSS實(shí)現(xiàn)圖標(biāo)旋轉(zhuǎn)的多種方法

在網(wǎng)頁(yè)設(shè)計(jì)中，使用CSS來(lái)旋轉(zhuǎn)圖標(biāo)是一種常見(jiàn)的效果，下面我們將介紹幾種實(shí)現(xiàn)圖標(biāo)旋轉(zhuǎn)的CSS方法。

使用CSS3的transform屬性

CSS3的transform屬性可以實(shí)現(xiàn)旋轉(zhuǎn)、縮放、移動(dòng)等多種效果，我們可以利用該屬性來(lái)實(shí)現(xiàn)圖標(biāo)的旋轉(zhuǎn)，將以下CSS代碼應(yīng)用于一個(gè)元素，就可以使其旋轉(zhuǎn)45度：

transform: rotate(45deg);

使用CSS的animation屬性

CSS的animation屬性可以實(shí)現(xiàn)動(dòng)畫(huà)效果，包括旋轉(zhuǎn)，我們可以定義一個(gè)動(dòng)畫(huà)，使圖標(biāo)在一段時(shí)間內(nèi)旋轉(zhuǎn)一圈：

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

使用SVG和CSS的結(jié)合

SVG是一種矢量圖形格式，可以通過(guò)CSS來(lái)旋轉(zhuǎn)，我們可以將圖標(biāo)轉(zhuǎn)換為SVG格式，然后使用CSS來(lái)旋轉(zhuǎn)它：

<svg class="icon">
  <path d="M0,0 L10,0 L10,10 L0,10 Z" />
</svg>
.icon {
  transform: rotate(45deg);
}

使用JavaScript和CSS的結(jié)合

我們可以使用JavaScript來(lái)檢測(cè)用戶的交互，例如點(diǎn)擊或懸停，然后使用CSS來(lái)旋轉(zhuǎn)圖標(biāo)：

document.querySelector('.icon').addEventListener('click', function() {
  this.style.transform = 'rotate(180deg)';
});

幾種方法都可以實(shí)現(xiàn)圖標(biāo)的旋轉(zhuǎn)，你可以根據(jù)自己的需求選擇適合的方法。