CSSのtransform-originはtransformの基準点を要素内の位置と長さで指定する

transform-originは、rotate()やscale()をどの点を中心に適用するか指定します。初期値は50% 50%で、要素の中央です。左端を軸に回すならleft center、左上を軸にするならleft topへ変えます。

transform-originだけでは要素は動きません。変形の内容はtransform、変形の基準点はtransform-originへ分けて指定します。

初期値は要素中央の50% 50%である

CSS Transforms Module Level 1では、transform-originの初期値を50% 50%としています。最初の値が横位置、二番目の値が縦位置です。

.panel {
  transform-origin: 50% 50%;
  transform: rotate(8deg);
}

横の50%は要素幅の半分、縦の50%は要素高の半分です。幅200px、高さ120pxの説明用要素なら、左上から横100px、縦60pxの点を基準に回転します。

二つの数値を指定する場合は、横、縦の順を変えません。25% 75%なら、幅200px、高さ120pxの要素で横50px、縦90pxの点です。

keywordは端と中央を指定する

left、center、rightは横位置、top、center、bottomは縦位置を表します。

一つだけ指定した場合、二番目の値はcenterとして扱われます。たとえばtransform-origin: left;は、横が左端、縦が中央です。意図をcodeに残すなら、left centerのように二つ書く方が読み取りやすくなります。

percentageは要素寸法に追従しlengthは固定距離になる

percentageは、横位置ではbounding boxの幅、縦位置では高さに対する割合です。CSS box modelで配置される要素のbounding boxはborder boxとして扱われます。

.card {
  width: 240px;
  height: 160px;
  transform-origin: 25% 75%;
  transform: scale(1.1);
}

この仮例では、border boxの左上から横25%、縦75%の点を基準に拡大します。要素幅が変われば基準点も追従します。

lengthは、左上からの固定距離です。

.card {
  transform-origin: 40px 20px;
  transform: scale(1.1);
}

要素幅が変わっても、横40px、縦20pxという距離は変わりません。可変幅の部品で要素内の同じ割合を保ちたいならpercentage、iconや蝶番のように固定位置へ軸を置きたいならlengthを候補にします。

transform-originは配置位置を変更しない

transform-originは、positionやmarginで決まる要素の配置基準ではありません。transform matrixを計算するとき、一度originへ移動し、transformを適用してから、反対方向へ戻すための点です。

transformによる見た目の変化は、周囲の要素を通常のlayout計算で押し動かしません。回転や拡大で元のboxからはみ出す場合は、隣の要素との重なりとoverflowを確認します。

配置そのものを動かしたい場合は、layoutに使うpropertyと、見た目を変形するtransformを分けます。transform-originの値を変え続けて、marginや座標のずれを直そうとしてはいけません。

transformと同じ要素へ基準点を指定する

説明用の仮例として、左端を蝶番に見立ててpanelを開きます。

.panel {
  transform-origin: left center;
  transform: rotate(12deg);
}

transform-originを親要素へ置き、transformを子要素へ置けば、同じ基準点の指定にはなりません。変形する要素と基準点を指定する要素をまず一致させます。

percentageとlengthを調整する前に、left top、center center、right bottomの三つへ切り替え、回転の軸がどこへ移るか確認します。次に必要な位置をpercentageまたはlengthで詰めます。最初から1pxずつ動かすより、横軸と縦軸のどちらが違うかを早く切り分けられます。

CSS Transforms Module Level 1はWorking Draftです。ここではpropertyの関係を示すため、prefixなしの記述を使っています。公開するサイトでは、対象browserでsyntaxと表示を確認し、必要なprefixの有無を別途判断してください。

最初の一手は、変形する要素へoutlineを付け、transform-originをleft topとcenter centerで切り替えることです。軸の違いを確認してから、割合で追従させるか、固定距離にするかを選びます。