CSS3實現(xiàn)元素持續(xù)旋轉(zhuǎn)的方法

在CSS3中，我們可以使用transform屬性和animation屬性來實現(xiàn)元素的持續(xù)旋轉(zhuǎn)，下面是一個簡單的示例，展示了一個元素如何被設(shè)置為持續(xù)旋轉(zhuǎn)：

1、我們需要創(chuàng)建一個HTML元素，例如一個div，來作為旋轉(zhuǎn)的對象：

<div id="rotate-div">我要旋轉(zhuǎn)！</div>

2、我們使用CSS來設(shè)置這個元素的樣式，包括旋轉(zhuǎn)的動畫效果：

#rotate-div {
  width: 200px;
  height: 200px;
  background-color: #f00;
  position: relative;
  /* 設(shè)置旋轉(zhuǎn)動畫 */
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在這個示例中，#rotate-div元素會被設(shè)置為一個紅色的方塊，并且會持續(xù)旋轉(zhuǎn)。animation屬性中的rotate關(guān)鍵字引用了一個名為rotate的動畫序列，這個動畫序列通過@keyframes規(guī)則定義，在rotate動畫中，元素從0度開始旋轉(zhuǎn)，到360度結(jié)束，這樣形成了一個完整的旋轉(zhuǎn)周期。5s表示動畫持續(xù)時間為5秒，linear表示動畫速度保持恒定，infinite表示動畫會無限次重復(fù)。

通過這種方法，我們可以輕松地在CSS3中實現(xiàn)元素的持續(xù)旋轉(zhuǎn)效果。