使用純 CSS 在點擊時進行 CSS3 轉換

為了增強用戶交互，您可能需要在點擊時使用 CSS3 轉換元素。具體來說，旋轉圖像以建立十字符號是一項常見任務。雖然懸停是轉換的常見觸發器，但本文探討了僅透過 CSS 使用 onClick 事件的可能性。

最初，提供的程式碼利用懸停事件將影像旋轉 45 度。但是，要在單擊時觸發轉換，需要進行修改。

活動狀態轉換

CSS 提供 :active 偽類，旨在按一下元素時設定元素的樣式。透過利用這個偽類，您可以實現所需的行為：

.crossRotate:active {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

點擊此程式碼會將影像旋轉 45 度。然而，需要注意的是，一旦釋放點擊，轉換就會消失。這是因為 :active 狀態僅在點擊期間處於活動狀態。

使用 JavaScript 保留轉換

如果您希望轉換在點擊後持續存在，則需要使用 JavaScript。透過使用 jQuery 擷取點擊事件，您可以使用 css() 方法切換轉換：

$( ".crossRotate" ).click(function() {
  if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(45deg)");
  } else {
    $(this).css("transform","" );
  }
});

在此程式碼中，檢查了轉換屬性。如果它設定為 none，則會套用轉換，否則將被刪除。這允許您在每次單擊時打開和關閉十字符號。

透過利用這些技術，您可以使用點擊時的 CSS3 變換有效地旋轉圖像，無論是否使用 JavaScript 來維持點擊以外的變換事件。