ホームページ > 記事 > ウェブフロントエンド > CSS と JavaScript を使用してクリック時に画像を回転する方法
純粋な CSS を使用してクリック時の画像の回転を実現するには、既存のコードがホバー時に回転するという課題に遭遇しました。純粋な CSS ソリューションに焦点を当てましょう。
ソリューション:
CSS のみ:
<code class="css">.crossRotate:active { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); }</code>
このソリューションは、:active 疑似クラスを利用します。画像をクリックすると回転がトリガーされます。ただし、変換はクリック後に持続しません。
持続的な変換を行うには、JavaScript を導入する必要があります。
<code class="javascript">$( ".crossRotate" ).click(function() { if ( $( this ).css( "transform" ) == 'none' ){ $(this).css("transform","rotate(45deg)"); } else { $(this).css("transform","" ); } });</code>
この jQuery コードは、現在の値に基づいて変換を切り替えます。 。変換が「なし」の場合、45 度の回転が適用されます。それ以外の場合は、変換が削除されます。
以上がCSS と JavaScript を使用してクリック時に画像を回転する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。