【css】要素を回転させるときの基準点を設定する方法
回転の基準点を設定するにはtransform-originというプロパティーを使います。ここではまず、transform-originについての簡単な解説と、回転の基準点として使う場合の基本の書き方を説明します。 1-1. transform-originの基本と回転の基準点として使う場合 transform-originは要素を変形させるプロパティーであるtransformの基準点を設定するためのプロパティーです。基準点はｘ軸、ｙ軸、ｚ軸の三つで位置を決めることができます。ｘ軸は横方向、ｙ軸は縦方向、ｚ軸は立体（３D）を示します。書き方は、次のようになります。
transform-origin: x軸 y軸 ｚ軸 ; ｘ軸 数値(% px)又はキーワード「left,right,center」 Y軸 数値(% px)又はキーワード「top,bottolm,center」 Z軸 数値(% px) transform-origin:center center 0; もしくは transform-origin:50% 50% 0;x軸で横方向に中央、ｙ軸で縦方向の中央、ｚ軸は値なし、がそれぞれ設定されています。 ここで、「ｚ軸は必要なのか？」という疑問がでてくると思うのですが、これは要素を変形させる（transform）ときに使用すると効果があるのですが、回転させる（transform:rotate()）ときには（特殊なケースを除いては）必要ではありません。「ｚ軸」は必要ないのにわざわざ設定する必要があるのか？そんな必要ないですよね、ということで、 ｚ軸の部分に関しては省略することも可能です。 先ほどのデフォルトの例で示すなら次のように設定することができます。
transform-origin:center center; もしくは transform-origin:50% 50%;【お題】要素の左上を中心にこの要素を時計回りに45°回転させたい （回転させてい要素を.item1とします）
transform : rotate ( 45deg ) ; /* キーワードで指定する場合*/ transform-origin : left top ; transform-origin : 0 0 ;結果
このように、左上を中心に要素を回転させることができました。 transform-originの指定は キーワード、数値、いずれか一方で指定すればいい のですが、私はキーワードで指定できるのであればできる限りキーワードで指定したほうがわかりやすいと考えております。これについては、次章でキーワードと数値の対比とあわせて解説したいと思います。
軸指定はキーワードを使ったほうがわかりやすい? left 「x軸」0 right 「ｘ軸」100％ center(x軸) 「ｘ軸」50％ top 「ｙ軸」0 bottom 「ｙ軸」100% center(y軸) 「y軸」50％この表で示す通りキーワードで指定できることはすべて数値で指定することが可能です。 それならば、キーワードを使わずすべて数値で指定すればいいではないか？と考えられる方もいるかもしれませんが、前章終わりに少し触れたように、私はキーワードを適応できるなら、できる限りそっちを使ったほうがよいと考えております。 理由は単純なのですが、キーワードで指定していたほうが、後にソースを見直したときに直観で基準点の位置を把握しやすいということです。Web制作においてソースを見直すといった作業は絶対にありえることです。その際、数値で書かれていると一瞬考えるという手間がひとつはいると思います。たとえ、作成者本人が、数値での配置に慣れていたとしても、第三者とデータを共有する機会があるかもしれませんし、キーワードで配置可能であるならばそちらを優先したほうがいいと思います。 言葉ばかりではわかりづらいでしょから、次のように例を示してみます。
【例】transform-originで右上を示す、キーワードと数値での比較
キーワードで指定する場合 transform-origin:right top; 数値で指定する場合 transform-origin:100% 0; こんな時は数値で基準点を指定しましょうキーワードで指定できないときは、当然数値で指定することになります。 指定は ｐｘ 、 ％ などの単位で設定可能です。 数値を使うとどこでも自由な位置に基準点を設定できます。下図のように、丸い蓋がクルッと開くような設定もできますし、要素から離れた場所に基準点を設定することも可能です。
transform:rotate()で基準点を設定するときに注意するべきこと
要素の大きさを把握するよくありがちな失敗としてブロック要素でtext-align:center;にした文字要素のみを回転させるつもりが、全体が回転してしまった図左のようなケースがあります。 この場合、 文字部分をなどで囲い インライン要素のままでは回転しないので display:inline-block; を設定して基準点、回転の設定をすると意図とした動きになります。 図では、左下に基準点を設定しておりますが、基点がcenterの場合でも、display:inline-block;の設定はしておいたほうがいいです。 なぜならば、文字部分だけが回転しているように見えていても、ブロック要素全体が回転することで見えない部分がリンク部分に干渉してリンクがクリックできない、文字選択できないなどの問題を起こす場合があるからです。
図
KEZOをフォローする WEBクリエイターの部屋関連記事
【css】線形グラデーションを背景に配置できるlinear-gradient()の使い方 cssだけで要素を回転させる方法 transform:rotate() 【css】蛍光ペンで引いたようなラインマーカーをテキスト上に設置する方法 電話番号に自動で挿入されるリンクを無効にする２つの方法(Edgeにも対応します） 【css】tableに角丸(border-radius)を設定できないときの問題解決方法 【css】text-shadowで文字に太い縁取りや光彩を装飾する方法 【css】これは便利！奇数、偶数、等間隔など～番目を指定する方法「:nth-child()」と「:nth-last-child」 もし、cssだけで最初の一文字目を指定するならfirst-letterが便利！ただし注意が必要です google map埋め込みの際拡大率、縮小率などの縮尺を調整する方法 【css】幅などの値を計算式で計算して指定できる関数「calc()」の使い方 カテゴリー WEBクリエイターの部屋の中の人WEB制作者としてフリーランスで10年以上。 現在はWEB作成企業数社と契約し年間100件以上の案件を手掛る。 WEBクリエイターの部屋ではWEB制作に役立つ知識とノウハウを提供します。
KEZOをフォローする 人気記事 【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右) 2019.01.15 2019.11.15 【css】蛍光ペンで引いたようなラインマーカーをテキスト上に設置する方法 2019.05.22 2019.08.23 カラーコードからrgbaへ変換するツール【css】 2019.03.14 2021.08.06 【css】背景色(background-color)のみを透過させ文字などは透過させない方法 2019.03.21 2020.10.01 【html】ファイルをダウンロードさせる最も簡単な方法 - JavaScript不要！download属性使用！ 2020.05.20 2020.06.02 Copyright © 2019 WEBクリエイターの部屋 All Rights Reserved. カテゴリー WEBクリエイターの部屋の中の人WEB制作者としてフリーランスで10年以上。 現在はWEB作成企業数社と契約し年間100件以上の案件を手掛る。 WEBクリエイターの部屋ではWEB制作に役立つ知識とノウハウを提供します。