CSS のみを使用して、クリック時に画像を 45 度回転するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS のみを使用して、クリック時に画像を 45 度回転するにはどうすればよいですか?

DDD

リリース： 2024-10-29 13:19:29

オリジナル

1086 人が閲覧しました

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

純粋な CSS を使用してクリック時に CSS3 画像をアニメーション化する

この記事では、クリック時に画像を 45 度回転する方法を説明します。 JavaScript に依存しない純粋な CSS。

初期コード

次の 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>

ログイン後にコピー

このコードは、画像の現在の変換をチェックします。「なし」の場合は画像が回転されていないことを意味するので、45度回転します。「なし」でない場合は、変換がリセットされ、画像が元の状態に戻ります。

以上がCSS のみを使用して、クリック時に画像を 45 度回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。