CSS と JavaScript を使用してクリック時に画像を回転する方法

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

純粋な 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 サイトの他の関連記事を参照してください。