使用CSS製作旋轉動畫效果

在網站設計中，動畫效果可以使網頁更加生動有趣，而使用CSS製作的動畫效果則可以減少網頁的加載時間和流量。

一、使用CSS3 transform屬性實現旋轉效果

CSS3中的transform屬性可以實現旋轉、縮放、平移等效果。其中，旋轉效果可以通過transform:rotate(deg)來實現，其中deg是旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉。

.rotate {
  display: inline-block;
  transition: transform 1s ease;
}

.rotate:hover {
  transform: rotate(360deg);
}

上述代碼會使class為rotate的元素在鼠標懸停時順時針旋轉360度。

二、利用animation製作旋轉動畫效果

CSS中的animation屬性可以實現更加複雜的動畫效果，包括延時、循環、關鍵幀等特性。旋轉動畫效果可以通過animation:rotate(deg)來實現。其中deg是旋轉角度。

.rotate {
  display: inline-block;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

上述代碼會使class為rotate的元素以線性方式在2s內無限循環地順時針旋轉360度。

三、讓圖標旋轉

使用SVG圖標可以方便地實現各種形態的圖標，其可以使用CSS進行樣式的控制。旋轉SVG圖標可以通過對SVG元素進行變換來實現。

.rotate {
  display: inline-block;
  transition: transform 1s ease;
}

.rotate:hover svg {
  transform: rotate(360deg);
}

上述代碼會使class為rotate的元素中的SVG圖標在鼠標懸停時順時針旋轉360度。

四、總結

使用CSS可以方便地實現各種動畫效果，其中旋轉效果可以通過transform屬性或animation屬性進行實現。在使用SVG圖標時，也可以通過CSS來實現圖標的旋轉效果。

以下是完整代碼示例：

.rotate {
  display: inline-block;
  transition: transform 1s ease;
}

.rotate:hover {
  transform: rotate(360deg);
}

.rotate {
  display: inline-block;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate {
  display: inline-block;
  transition: transform 1s ease;
}

.rotate:hover svg {
  transform: rotate(360deg);
}