利用CSS動畫旋轉元素

一、旋轉屬性介紹

CSS中旋轉相關的屬性有很多，其中最常用的是transform屬性。它可以實現元素的旋轉、縮放、平移等一系列的變換效果。它是一個可繼承屬性，可以應用於所有的元素。

transform: rotate(45deg); // 順時針旋轉45度
transform: rotate(-45deg); // 逆時針旋轉45度
transform: rotateY(45deg); // 在Y軸順時針旋轉45度
transform: rotateX(45deg); // 在X軸順時針旋轉45度

二、動畫實現

在CSS中，可以通過transition或者animation屬性來實現動畫效果。在下面的例子中，使用animation屬性，設置元素旋轉動畫。

@keyframes rotation {
  from {
    transform: rotate(0deg); // 開始角度為0度
  }
  to {
    transform: rotate(360deg); // 終止角度為360度
  }
}
.rotating {
  animation: rotation 2s infinite linear; // 設置動畫時長、重複次數、取值方式等
}

在上述代碼中，利用@keyframes定義了一個名為rotation的動畫，其中from表示動畫的開始狀態，to表示動畫的結束狀態。在rotating類中，應用了這個動畫，設置了動畫的時長、重複次數、取值方式等。

三、應用場景

旋轉元素可以應用在很多場景中。比如，在輪播圖製作中，切換圖片時可以使用旋轉動畫，使得界面更加生動有趣。在菜單製作中，可以使用旋轉動畫改變菜單圖標的方向，增加操作的交互性。

四、完整代碼示例

下面是一個完整的例子，展示了如何使用CSS動畫旋轉元素。

.box {
 width: 100px;
 height: 100px;
 background: #333;
 color: #fff;
 text-align: center;
 line-height: 100px;
 font-size: 24px;
 border-radius: 50%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -50px 0 0 -50px;
}
@keyframes rotation {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 }
}
.box.rotating {
 animation: rotation 2s infinite linear;
}
旋轉元素
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/293895.html