transform-origin

transform-origin は CSS のプロパティで、要素の変形 (transform) における原点を設定します。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

変形の原点とは、それを中心に変形が適用される点です。例えば、 rotate() 関数における変形の原点は、回転の中心です。

このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。
すなわち、

transform-origin: -100% 50%;
transform: rotate(45deg);

この定義は以下の変形と同じです。

transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

既定で、変形の原点は center です。

/* 値１つの構文 */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* グローバル値 */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

transform-origin プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する初期値にリセットされます。

２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが center だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。

• 値１つの構文:
  • 値は <length>, <percentage>, 又は left, center, right, top, bottom のうちの１つでなければなりません。
• 値２つの構文:
  • 一方の値は <length>, <percentage>, 又はキーワードの left, center, right のうちの１つでなければなりません。
  • もう一方の値は、 <length>, <percentage>, 又はキーワードの top, center, bottom のうちの１つでなければなりません。
• 値３つの構文:
  • １番目と２番目の値は、値２つの構文と同じです。
  • ３番目の値は <length> でなければなりません。これは常に Z オフセットを表します。

x-offset

<length> または <percentage> の、ボックスの左端から変形の原点までの距離を示す値です。

offset-keyword

left, right, top, bottom, center のいずれかのキーワードで、対応するオフセットを表します。

y-offset

<length> または <percentage> の、ボックスの右端から変形の原点までの距離を示す値です。

x-offset-keyword

left, right, center のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。

y-offset-keyword

top, bottom, center のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。

z-offset

<length> 値 (<percentage> を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。

キーワードは便利な速記であり、次の <percentage> 値に相当します。

[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?
ここで
<length-percentage> = <length> | <percentage>

• CSS 変形の使用
• https://css-tricks.com/almanac/properties/t/transform-origin/