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

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

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

Active State Transformation

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

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

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

JavaScript による変換の保持

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

$( ".crossRotate" ).click(function() {
  if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(45deg)");
  } else {
    $(this).css("transform","" );
  }
});

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

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