ホームページ  >  記事  >  ウェブフロントエンド  >  CSS と JavaScript を使用してクリック時に画像を回転する方法

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-01 01:50:28299ブラウズ

How to Rotate an Image on Click Using CSS and 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。