LINEで現役エンジニアに直接質問してみよう!登録無料

CSS transform:rotate()の使い方・書き方!任意の基準点で要素を回転させる

この記事のまとめ

transform:rotate()を使うと、HTML上の1パーツを自由な角度に回転させることが出来ます。アニメーションを動かすCSSと組み合わせると、グンと表現の幅が広がります!
そこで本記事では、Webプログラマのアキ(@hackablejp )がtransform:rotate()の使い方から、アニメーションの応用方法までをご紹介します♪

CSSの中には、要素を拡大・縮小したり変形したりできるプロパティtransformがあります。 transform:rotate()とは、HTMLの要素や画像を回転させる設定です。transitionと組み合わせると、回転のアニメーションを作ることも出来ます。
合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

transform:rotate()とは?

transform:rotate()は、transform(トランスフォーム)とrotate(ローテート)の2つ別れます。 transformはHTMLの要素や画像を回転させるCSSプロパティの1つで、rotateは回転について制御する専用の関数です。 プロパティとは、簡単に言うと「設定」で、その中にtransformという設定項目があります。このtransformは、画像を回転させるだけではなく、拡大縮小、変形、3次元回転、3次元変形等、様々な使い方があります。 では、これらの設定をどのように行うのかと言うと、「関数」と呼ばれる設定を使います。 数学にも「関数」がありますが、その意味とは全く違います。ここで言う関数とは、「設定の書き方の1つ」だと考えてください。その関数の中の1つが画像を回転を設定する「rotate()」という関数です。 このtransform + rotate()の使い方は、次章で解説します。

transform:rotate()の書き方・使用例

transform + rotate()の使い方はとても簡単です。 例えば、時計回りに45度傾けたい場合には、下記のように書きます。
.rotate {
    transform: rotate(45deg);
}
rotate()の中には、角度を指定します。角度には円周をとして定義した「弧度法 (ラジアン) 」、一周を360度とした「度数法 (度) 」など色々な表し方があります。 その中でも、ブラウザで対応している書き方は4種類です。
deg – 角度を度数法 (度) で表します。円一周は 360deg です。例: 0deg, 90deg, 14.23deg grad – 角度をグラードで表します。円一周は 400grad です。例: 0grad, 100grad, 38.8grad rad – 角度を弧度法 (ラジアン) で表します。円一周は 2π ラジアンで、およそ 6.2832rad です。 1rad は 180/π 度です。例: 0rad, 1.0708rad, 6.2832rad turn – 角度を回転数で表します。円一周は 1turn です。例: 0turn, 0.25turn, 1.2turn https://developer.mozilla.org/ja/docs/Web/CSS/angle
逆方向に回転させたい場合は、数値に-(マイナス)を使います。
.rotate {
    transform: rotate(-45deg);
}

transform:rotate()の使い所とサンプル

画像や要素を回転して表示させるだけなら、あまり使い所がないと思います。しかし、別のCSSプロパティであるtransitionと同時に使うことで、回転のアニメーションをjavascript無しで作ることが出来ます! 早速やってみましょう。 ちなみに、冒頭で紹介したサンプルもtransitionを使っています。

transitionとは?ざっくり解説

transition(トランジション)とは、直訳すると「変化、移り変わり」という意味で、「ある状態からある状態に変化する時、その変化をアニメーションとして動作させる」という事が出来ます。 状態が変化する必要があるので、CSSのhover・checked、javascriptによるクラス付与などにより、CSSをプロパティを上書きし、その変化をtransitionによりアニメーション化するという手順を踏みます。 今回は、CSSのhoverをつかって、回転アニメーションを作ってみます。

回転アニメーション作成手順

回転のアニメーションの作成手順は下記です。
  1. アニメーション動作前のデザインをCSSで作成します
  2. アニメーション動作後のデザインをCSSで作成します
  3. アニメーション動作前に作ったCSSの方にtransitionを設定します
  4. (オプション) アニメーションの動作速度を調節しよう

1. アニメーション動作前のデザインをCSSで作成します

まずは、普通にアニメーション動作前のデザインをCSSで作成しましょう。

2. アニメーション動作後のデザインを別CSSで作成します

次に、アニメーション動作後のデザインをCSSで作成します。今回は、要素にhoverした時(マウスポインタを当てた時)に動作するようにします。 実際にhoverすると、45度回転します。

アニメーション動作前に作ったCSSの方にtransitionを設定します

いよいよ、アニメーション化します。アニメーション動作に作ったCSSの方にtransitionを設定しましょう。

(オプション) アニメーションの動作速度を調節しよう

あとは、transitionの設定を変更して、変化度合いや変化時間をカスタマイズすることが出来ます。また、アニメーションをするCSSプロパティを限定したり出来ます。 詳しくは、下記サイトを見てください。 参考 transitionプロパティの使い方webst8

回転の中心軸をずれた位置にしたい場合

回転軸をずらしたい場合もあるかと思います。そんな時はtransform-originが使えます。 まずは、例を紹介します。ボタンをクリックして回転角を変えてみてください。を中心にした回転が実際にわかります。
transform-originの実際の書き方は、下記のようになります。
.elem {
    transform-origin: 30px 30px;
}
transform-originを使って回転軸を変更するには、2つの値を書きます。最初の値から「x軸」「y軸」を表し、左上角を基準点(0, 0)です。
.elem {
    transform-origin: x軸 y軸;
}
値には、px%を使用することができます。 %の場合は、要素のサイズを基準にして長さを指定できます。左上、右上、右下、左下を基準にして回転したい場合は、下記のように指定します。
  • 左上 – transform-origin: 0 0;
  • 右上 – transform-origin: 100% 0;
  • 右下 – transform-origin: 100% 100%;
  • 左下 – transform-origin: 0 100%;
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。