如何使用純 CSS 單擊時將圖像旋轉 45 度？

點擊時的CSS3 轉換：純CSS 方法

在Web 開發中，轉換元素通常是創建引人入勝的功能性介面的關鍵方面。使用 CSS3 可以實現的一種變換就是旋轉。本文探討如何利用純 CSS 在點擊時對圖像（特別是加號）應用 45 度旋轉。

提供的程式碼成功地在懸停時旋轉影像。但是，要實現單擊時旋轉的所需行為，需要進行一些修改。

在 CSS 中，':active' 偽類表示元素或其後代元素被點擊或啟動的狀態。透過利用這個偽類，我們可以新增一個 CSS 規則，在點擊圖片時套用旋轉變換。

<code class="css">.crossRotate:active {
   transform: rotate(45deg);
}</code>

實現此規則後，按一下影像會將其旋轉 45 度。需要注意的是，這種轉換是臨時的，當單擊被釋放時，它將恢復到其原始狀態。

對於轉換在點擊事件之外持續存在的更永久的解決方案，可以合併 JavaScript。使用 jQuery，可以透過擷取點擊事件並相應地切換旋轉轉換來實現這一目的。

<code class="javascript">$( ".crossRotate" ).click(function() {
    if (  $( this ).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(45deg)");
    } else {
        $(this).css("transform","" );
    }
});</code>

此程式碼片段在按一下影像時切換旋轉轉換。當圖像處於預設狀態時，按一下它會將其旋轉 45 度。再次單擊它將恢復到原來的位置。

以上是如何使用純 CSS 單擊時將圖像旋轉 45 度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！