CSS3 Transform を使用してクリック時に画像を回転するにはどうすればよいですか?

純粋な CSS を使用したクリック時の CSS3 変換

ユーザー インタラクションを強化するために、CSS3 を使用してクリック時に要素を変換する必要が生じる場合があります。具体的には、画像を回転して十字記号を作成するのが一般的なタスクです。ホバーリングは変換の一般的なトリガーですが、この記事では CSS のみを介して onClick イベントを使用する可能性を検討します。

最初に、提供されたコードはホバー イベントを利用して画像を 45 度回転します。ただし、クリック時に変換をトリガーするには、変更が必要です。

Active State Transformation

CSS は、要素がクリックされたときにスタイルを設定するように設計された :active 擬似クラスを提供します。この疑似クラスを利用することで、目的の動作を実現できます。

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

このコードは、クリックされると画像を 45 度回転します。ただし、クリックを放すと変形が消えることに注意することが重要です。これは、:active 状態がクリック中のみアクティブになるためです。

JavaScript による変換の保持

クリック後に変換を保持したい場合は、JavaScript を使用する必要があります。 jQuery を使用してクリック イベントをキャプチャすると、css() メソッドを使用して変換を切り替えることができます。

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

このコードでは、transform プロパティがチェックされます。 none に設定すると変換が適用され、それ以外の場合は削除されます。これにより、クリックするたびに十字記号のオンとオフを切り替えることができます。

これらのテクニックを利用すると、JavaScript の有無にかかわらず、クリック時に CSS3 変換を使用して画像を効果的に回転し、クリック後も変換を維持できます。イベント。

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