CSSで要素を回転させる方法！rotate()関数の基本と実践テクニック

CSSのrotate()関数は、要素を指定した角度だけ回転させるための機能です。正の値（例：45deg）を指定すれば時計回りに、負の値（例：-39deg）を指定すれば反時計回りに回転できます。

本記事では、CSSで要素を回転させる方法をわかりやすく解説します。要素に回転を加えると、Webページに動きが生まれ、インタラクティブな印象を与えられます。適切に活用すれば、サイトのデザイン性も一段と引き立てられるでしょう。

CSS rotate()関数の基本

rotate()関数を使うと、要素を2D平面上で回転させることができます。引数として受け取るのは「回転させたい角度」のみで、時計回りにも反時計回りにも対応しています。

rotate()関数の構文は以下の通りです。

transform: rotate(angle);

「angle」には、要素を回転させる角度を度数（deg）で指定します。正の値を指定すると時計回り（例：45）、負の値を指定すると反時計回り（例：-39）に回転します。

rotate()関数は、あらゆるHTML要素に適用できます。テキストの段落を回転させたり、画像を傾けて表示したりすることも可能です。

ただし、ページを読み込んだ時点で回転が適用されるため、そのままでは回転の変化を目視で確認できません。回転の動きを見せたい場合は、CSSトランジション（transition）を組み合わせましょう。トランジションを使うと、カーソルが要素に乗ったときなど、ユーザーのアクションをきっかけに要素の状態を滑らかに変化させられます。

rotate()関数の実装例

それでは、実際に回転するボックスを配置するHTMLページを作成してみましょう。まず、div要素でボックスを作成し、「rotate」というクラス名を付与します。

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

次に、以下のスタイルを追加します。

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

ブラウザを更新すると、チョコレート色の四角いボックスが表示されます。これでrotate()関数を試す準備が整いました。

transformプロパティとの関係

ボックスを回転させるには、まずtransformプロパティについて理解しておきましょう。

CSSのtransformプロパティは、その名の通り要素を「変形」させるためのプロパティです。適用できる関数のひとつがrotate()です。transformプロパティにはrotate以外にもさまざまな関数を指定でき、移動・拡大縮小・傾斜など多彩な変形が可能です。回転はその中のひとつの機能にすぎません。

rotate()関数は、要素を回転させる際に「回転させる角度」をひとつの引数として受け取ります。それでは、35度の正の回転を適用してみましょう。

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

これでボックスが35度回転しました。思ったより簡単だったのではないでしょうか。

CSS transform rotate()関数の活用シーン

rotate()は、おしゃれなUIの実現や画像の回転など、さまざまな場面で活躍します。たとえば、画像を180度回転させて表示したい場合に使えます。回転後の画像が必要であれば、保存して別の場所で利用することも可能です。

回転できるのは画像だけではありません。テキストも回転できます。たとえば雑誌のようなレイアウトを作る際、テキスト要素を回転させて強調表現を加えるといった使い方ができます。

さらに、rotate()の可能性はこれだけにとどまりません。rotate関数を使うと、とても魅力的なアニメーションも作れるのです。

試しに、CSSの:hoverセレクタを使って、マウスオーバー時に回転エフェクトがかかるようにしてみましょう。

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

このコードでは、ボックスにカーソルを合わせると35度回転し、同時にbackground-colorプロパティによってボックスの色がディープピンクに変化します。マウスオーバーだけで手軽に動きのある演出を実装できるのは嬉しいポイントですね。

まとめ

CSSのrotate()関数を使うと、Web要素を任意の角度で表示できます。この関数が受け取る引数は「回転角度」のひとつだけで、正の値・負の値のどちらも指定可能です。

要素を回転させれば、Webページをより魅力的にデザインできます。たとえば、ユーザーがカーソルを合わせたときにボックスを回転させたり、リンクにホバーしたときに傾きを加えたりするのも良いでしょう。ぜひ自分のアイデアで、このスキルを活かしてみてください。