如何僅使用 CSS 在單擊時將圖像旋轉 45 度？-css教學-PHP中文網

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

DDD

發布： 2024-10-29 13:19:29

原創

1087 人瀏覽過

How can I rotate an image 45 degrees on click using only CSS?

使用純CSS 點擊時對影像進行CSS3 動畫

在本文中，我們將探索如何在點擊時將影像旋轉45度純CSS，不依賴JavaScript。

初始代碼

您已提供以下CSS：

<code class="css">img {
    display: block;
    margin: 20px;
}

.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

.crossRotate:hover {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}</code>

登入後複製

此程式碼目前用於旋轉動畫懸停時，但它不響應點擊。

純 CSS 解決方案

要使用純 CSS 實現點擊時旋轉，您可以使用 :active 選擇器。校正後的 CSS 應該如下所示：

<code class="css">.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

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

登入後複製

現在，當您點擊圖片時，它將旋轉 45 度。但是，釋放單擊後它將保持旋轉狀態。如果您希望圖像在每次點擊後恢復到原始狀態，則需要使用 JavaScript。

JavaScript 解決方案

使用 JavaScript，您可以切換點擊時旋轉如下：

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

登入後複製

此程式碼檢查影像的目前變換。如果為“none”，則表示影像未旋轉，因此會將其旋轉 45 度。如果不是“無”，它將重置轉換，將圖像返回到其原始狀態。

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