ホームページ

ウェブフロントエンド

CSSチュートリアル

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

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

Patricia Arquette

Oct 30, 2024 am 03:23 AM

Here are two possible titles, focusing on the

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

このウェブサイトの声明

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