CSS實現(xiàn)點擊旋轉(zhuǎn)效果

在CSS中，我們可以使用transform屬性來實現(xiàn)旋轉(zhuǎn)效果，為了實現(xiàn)點擊旋轉(zhuǎn)，我們需要使用JavaScript來監(jiān)聽點擊事件，并在事件處理函數(shù)中應用CSS的transform屬性。

我們需要獲取到需要旋轉(zhuǎn)的元素，并為其添加一個點擊事件監(jiān)聽器，在監(jiān)聽器中，我們可以將元素的transform屬性設置為rotate，并指定旋轉(zhuǎn)的角度，為了實現(xiàn)連續(xù)旋轉(zhuǎn)的效果，我們還可以在監(jiān)聽器中設置一個定時器，并在每次旋轉(zhuǎn)后將角度重置為0。

以下是一個簡單的實現(xiàn)示例：

HTML代碼：

<div id="rotate-button">點擊旋轉(zhuǎn)</div>

CSS代碼：

#rotate-button {
  transform: rotate(0deg);
  transition: transform 0.5s;
}

JavaScript代碼：

var rotateButton = document.getElementById('rotate-button');
var angle = 0;
var timer;
rotateButton.addEventListener('click', function() {
  angle += 90;
  if (angle >= 360) {
    angle = 0;
  }
  rotateButton.style.transform = 'rotate(' + angle + 'deg)';
});

在上面的代碼中，我們?yōu)樵靥砑恿艘粋€點擊事件監(jiān)聽器，并在每次點擊時更新元素的transform屬性，我們還設置了一個定時器來重置角度，以實現(xiàn)連續(xù)旋轉(zhuǎn)的效果。

需要注意的是，在實際應用中，我們可能需要根據(jù)具體的需求對代碼進行調(diào)整和優(yōu)化，我們可以添加一些動畫效果來使旋轉(zhuǎn)更加平滑，或者設置不同的旋轉(zhuǎn)速度來增強用戶體驗。