Javascriptでクリックすると画像を回転します

| | | | | | | | | | | | | | | | | |

CSSのrotate()関数は、要素を特定の角度だけ歪ませます。正の度数を使用して、要素を時計回りに回転させることができます。または、負の数を使用してアイテムを反時計回りに回転させることもできます。

今日は、CSSを使用して要素を回転させる方法を学習します。なぜ要素を回転させるのですか?要素を回転させると、Webページがよりインタラクティブになります。正しく使用すると、回転要素がサイトの美しさを増します。

この記事を読むときは、コンパニオンリポジトリなので、実際の概念を確認できます。要素を回転させる方法を知っていると、CSSツールボックスに追加されます。

CSSrotate()

CSSのrotate()関数を使用すると、要素を2D軸上で回転させます。 rotate()関数は、Web要素を回転させる角度という1つの引数を取ります。要素を時計回りまたは反時計回りに回転させることができます。

rotate()関数の構文を見てみましょう。

「角度」の値は、要素が回転する角度を表します。正の度数(たとえば45度)を使用して時計回りの回転を指定できます。または、負の次数値(たとえば、-39)を使用して反対方向に回転することもできます。

rotate()関数は、任意のHTML要素に適用できます。たとえば、テキストの段落を回転させることができます。または、画像を回転させることもできます。

ページをレンダリングするとすぐにHTMLの回転が表示されるため、回転は表示されません。ローテーションの動作を確認するには、CSSトランジションを使用する必要があります。遷移は、カーソルが要素の上にあるときなど、アクションが実行されたときに要素の状態を変更します。

rotate()CSSの例

次に、回転ボックスを配置するHTMLページを作成しましょう。ボックスをdivとして追加し、それにクラスを割り当てます(これを「回転」と呼びます)。

次に、スタイルを追加しましょう:

更新します。素晴らしい、色付きのボックスがあります。この色付きのボックスを使用すると、rotate()関数の使用を開始するために必要なものがすべて揃っています。

は、その名前が示すように、要素を変換します。適用できる関数の1つはrotate()です。変換プロパティは他の多くの機能を引き受けることができ、変換でできることはたくさんあります。回転はその1つにすぎません。

回転機能は要素を移動します。 1つの引数が必要です。要素を傾けたい度数です。先に進み、正の35度回転を適用しましょう:

ボックスを回転させました!背中を触ってください。

回転により、洗練されたユーザーインターフェースのアイデアや画像の回転が可能になります。たとえば、画像を180度回転させることができます。この画像を他の場所で回転させる必要がある場合は、保存してそれに応じて使用してください。

回転できるもう1つのものはテキストです。雑誌を模倣したレイアウトを作成するとします。実際にテキストを回転させてテキスト要素を強調することができます。

そして、 rotate()でできることはそれだけではありません。回転関数を使用すると、非常に興味深いアニメーションを作成できます!

Let`s `前にそこから移動し、divで CSS:ホバーセレクターを使用して、優れた回転効果を適用しましょう:

Isn&rsquo; N「そのクール? <フィギュアクラス= "WP-画像ブロック"> 「GIF-20ではありません-31-51

フレームにカーソルを合わせると、フレームが回転します。 CSSのbackground-colorプロパティを使用して、フレームにカーソルを合わせたときにフレームの色を変更します。

結論

CSSのrotate()関数は、非対称のWeb要素を表示します。 1つは引数を受け入れます:要素の回転の度数。正または負の次数値を指定できます。

要素を回転させると、Webページをより美しくすることができます。たとえば、ユーザーがセルにカーソルを合わせたときに、セルに回転を適用できます。または、ユーザーがマウスでリンクにカーソルを合わせたときにリンクを回転させることもできます。このスキルをどのように使用するかはあなた次第です!

CSSについてもっと知りたいですか? 完全なCSS学習ガイドで、最高の学習リソースに関する専門家のアドバイスとヒントを確認してください。