あなたがリクエストした「純粋な CSS」の側面に焦点を当てた、2 つのタイトルの候補を次に示します。 1. Pure CSS を使用して、クリック時に画像を 45 度回転できますか? (質問を強調し、「純粋な C

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

この記事では、クリック時に画像の回転アニメーションを実現する方法を説明します。 CSSのみ。元の質問から始めましょう。

質問:

ユーザーは、CSS を使用して画像を 45 度回転して十字記号を作成したいと考えていました。ただし、ホバーに依存するコードは、onclick イベントでは機能しませんでした。彼らは純粋な CSS を使用した簡単な解決策を模索しました。

答え:

クリック時の回転を実現するには、代わりに ':active' 疑似クラスを利用できます。 「:ホバー」。修正されたコードは次のとおりです:

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

ただし、この修正では、クリック アクティビティが終了した後の変換の永続化には対処していません。これに対処するには、JavaScript を組み込むことができますが、純粋な CSS ソリューションの場合、永続化は現実的ではありません。

以上があなたがリクエストした「純粋な CSS」の側面に焦点を当てた、2 つのタイトルの候補を次に示します。 1. Pure CSS を使用して、クリック時に画像を 45 度回転できますか? (質問を強調し、「純粋な Cの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。