CSSを使用した要素の回転

CSSのrotate（）関数は、要素を特定の角度だけ傾斜させます。正の度数を使用して、要素を時計回りに回転させることができます。または、負の数を使用して要素を反時計回りに回転させることもできます。

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

この記事を読んでいる間、付随するレポを参照してください。そうすれば、実際の概念を見ることができます。要素を回転させる方法を知ることは、CSSツールボックスへの貴重な追加になります。

CSSrotate（）

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

rotate（）関数の構文を見てみましょう：

transform: rotate(angle);

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

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

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

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

rotate（）CSSの例

先に進んで、回転ボックスを配置するHTMLページを作成しましょう。ボックスをdivとして追加し、クラスを付けましょう（「rotate」という名前を付けましょう）。

<div class="rotate"></div>

それでは、スタイルを追加しましょう：

div.rotate {
    width: 50px;
    height: 50px;
    background-color: chocolate;
}

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

ボックスを回転させるには、最初に変換プロパティについて説明する必要があります。

名前が示すように、CSS変換関数は要素を変換します。適用できる関数の1つは、 rotate（）です。 。変換プロパティは他の多くの関数を受け取ることができ、変換を使用して実行できることはたくさんあります。回転はそのうちの1つにすぎません。

回転機能は要素を移動します。それは1つの引数を取ります：要素を歪めたい度数です。先に進み、35度の正の回転を適用しましょう：

div.rotate {
    width: 50px;
    height: 50px;
    background-color: chocolate;
    transform: rotate(35deg); 
}

ボックスを回転させました！背中をタップします。

CSS変換rotate（）関数を使用する場合

Rotateを使用すると、派手なUIのアイデアや画像の回転が可能になります。たとえば、画像を180度回転させることができます。回転した画像が必要な場合は、保存して適宜使用してください。

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

rotate（）でできることはそれだけではありません 。回転機能を使用すると、非常にクールなアニメーションを実行できます。 ！

先に進み、divのCSS：hoverセレクターを使用して、実際に優れた回転効果を適用しましょう：

.rotate:hover {
    transform: rotate(35deg); 
    background-color: deeppink;
}

かっこいいじゃないですか？ ＆＃128526;

ボックスにマウスを合わせると、ボックスが回転します。背景色のCSSプロパティを使用して、ボックスにカーソルを合わせたときにボックスの色を変更します。

結論

CSSのrotate（）関数は、Web要素を斜めに表示します。この関数は、要素を回転させる度数という1つの引数を受け入れます。正または負の次数値を指定できます。

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

CSSについてもっと知りたいですか？最高の学習リソースに関する専門家のアドバイスとガイダンスについては、CSSの完全な学習方法ガイドをご覧ください。