如何使用 CSS3 變換在點擊時旋轉圖像？

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

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

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

活動狀態轉換

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

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

使用 JavaScript 保留轉換

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

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

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

以上是如何使用 CSS3 變換在點擊時旋轉圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！