【css】要素を回転させるときの基準点を設定する方法

transform:rotate()を使って回転を加えたが意図とした位置で回転してくれないといった悩みはないでしょうか？
この場合、回転する基準点を設定することで、意図とした位置で回転させることができます。

cssで要素を回転させるときの基準点を設定する方法について、WEB制作者としてフリーランスで10年以上、現在はWEB作成企業数社と契約し年間100件以上の案件を手掛るクリエイターである私が解説いたします。

【基本】回転の基準点をtransform-originで設定する方法

transform-originの基本と回転の基準点の設置方法

回転の基準点を設定するにはtransform-originというプロパティーを使います。ここではまず、transform-originについての簡単な解説と、回転の基準点として使う場合の基本の書き方を説明します。
1-1. transform-originの基本と回転の基準点として使う場合
transform-originは要素を変形させるプロパティーであるtransformの基準点を設定するためのプロパティーです。基準点はｘ軸、ｙ軸、ｚ軸の三つで位置を決めることができます。ｘ軸は横方向、ｙ軸は縦方向、ｚ軸は立体（３D）を示します。書き方は、次のようになります。

次に、各「軸」の位置の指定方法ですが、それぞれ下記のように指定します。

基本の書き方が分かったところで、回転（transform:rotate()）に対応する基準点（transform-origin）の指定方法を見ていきます。
まず、transform-originを指定しない場合の回転（transform:rotate()）に対する基準点についてですが、これは要素の中心がそれにあたります。transform-originで示すと次のようになります。

x軸で横方向に中央、ｙ軸で縦方向の中央、ｚ軸は値なし、がそれぞれ設定されています。
ここで、「ｚ軸は必要なのか？」という疑問がでてくると思うのですが、これは要素を変形させる（transform）ときに使用すると効果があるのですが、回転させる（transform:rotate()）ときには（特殊なケースを除いては）必要ではありません。「ｚ軸」は必要ないのにわざわざ設定する必要があるのか？そんな必要ないですよね、ということで、ｚ軸の部分に関しては省略することも可能です。
先ほどのデフォルトの例で示すなら次のように設定することができます。

こちらのほうがわかりやすいですね。
それではｚ軸を省略した書き方で具体的な設定方法をみてみます。

【お題】要素の左上を中心にこの要素を時計回りに45°回転させたい
（回転させてい要素を.item1とします）

結果

このように、左上を中心に要素を回転させることができました。
transform-originの指定はキーワード、数値、いずれか一方で指定すればいいのですが、私はキーワードで指定できるのであればできる限りキーワードで指定したほうがわかりやすいと考えております。これについては、次章でキーワードと数値の対比とあわせて解説したいと思います。

軸指定はキーワードを使ったほうがわかりやすい?

キーワードを数値で表すと次のようになります。

この表で示す通りキーワードで指定できることはすべて数値で指定することが可能です。
それならば、キーワードを使わずすべて数値で指定すればいいではないか？と考えられる方もいるかもしれませんが、前章終わりに少し触れたように、私はキーワードを適応できるなら、できる限りそっちを使ったほうがよいと考えております。
理由は単純なのですが、キーワードで指定していたほうが、後にソースを見直したときに直観で基準点の位置を把握しやすいということです。Web制作においてソースを見直すといった作業は絶対にありえることです。その際、数値で書かれていると一瞬考えるという手間がひとつはいると思います。たとえ、作成者本人が、数値での配置に慣れていたとしても、第三者とデータを共有する機会があるかもしれませんし、キーワードで配置可能であるならばそちらを優先したほうがいいと思います。
言葉ばかりではわかりづらいでしょから、次のように例を示してみます。

【例】transform-originで右上を示す、キーワードと数値での比較

もちろん数値で指定することが悪いというわけではないですが、キーワードで示されているほうがわかりやすいきがしませんか？

こんな時は数値で基準点を指定しましょう

キーワードで指定できないときは、当然数値で指定することになります。
指定はｐｘ、％などの単位で設定可能です。
数値を使うとどこでも自由な位置に基準点を設定できます。下図のように、丸い蓋がクルッと開くような設定もできますし、要素から離れた場所に基準点を設定することも可能です。

transform:rotate()で基準点を設定するときに注意するべきこと

要素の大きさを把握する

よくありがちな失敗としてブロック要素でtext-align:center;にした文字要素のみを回転させるつもりが、全体が回転してしまった図左のようなケースがあります。
この場合、文字部分を<span>などで囲いインライン要素のままでは回転しないのでdisplay:inline-block;を設定して基準点、回転の設定をすると意図とした動きになります。
図では、左下に基準点を設定しておりますが、基点がcenterの場合でも<span>、display:inline-block;の設定はしておいたほうがいいです。
なぜならば、文字部分だけが回転しているように見えていても、ブロック要素全体が回転することで見えない部分がリンク部分に干渉してリンクがクリックできない、文字選択できないなどの問題を起こす場合があるからです。

図