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%;

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ