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

クリック時の CSS3 変換: 純粋な CSS アプローチ

Web 開発では、要素の変換は多くの場合、魅力的で機能的なインターフェイスを作成するために重要な要素となります。 。 CSS3 を使用して実現できる変換の 1 つは回転です。この記事では、純粋な CSS を利用して、クリック時に画像 (特にプラス記号) に 45 度の回転を適用する方法を説明します。

提供されたコードは、ホバー時に画像を正常に回転させます。ただし、クリック時に回転するという目的の動作を実現するには、わずかな変更が必要です。

CSS では、「:active」疑似クラスは、要素またはその子孫がクリックまたはアクティブ化されている状態を表します。この疑似クラスを利用することで、画像をクリックしたときに回転変換を適用する CSS ルールを追加できます。

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

このルールを実装すると、画像をクリックすると 45 度回転します。この変換は一時的なものであり、クリックが放されると元の状態に戻ることに注意することが重要です。

クリック イベントを超えて変換が持続する、より永続的なソリューションの場合は、JavaScript を組み込むことができます。 jQuery を使用すると、クリック イベントをキャプチャし、それに応じて回転変換を切り替えることでこれを実現できます。

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

このスニペットは、画像がクリックされたときに回転変換を切り替えます。画像がデフォルト状態の場合、クリックすると 45 度回転します。もう一度クリックすると元の位置に戻ります。

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