CSS3

プロパティ

transform-origin

→●、mdn

変形の基準位置。

transform、transform-origin プロパティの値は、上述に従って変形行列を算出するために利用される。

指定された（成分）値が 1 個だけの場合、2 個目の値は center と見做される。

指定された値が 2 個以下の場合、3 個目の値は 0px と見なされる。

この補完により得られた 3 個の値のうち、最初の 2 個の値のいずれにも center 以外のキーワードが利用されていない場合、1 個目の値は 横位置（またはオフセット）を表現し、2 個目の値は 縦位置（またはオフセット）を表現する。
3 個目の値は常に Z 位置（またはオフセット）を表現し、<length> 型でなければならない。【3 個目の値は 3D 変形用の拡張なので、この仕様（レベル 1）の文脈では意味を成さない。】

[left | center | right | top | bottom | <length-percentage>]

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:left;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:center;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:right;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:top;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:bottom;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:10px;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:20px;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:20%;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:50%;
">

[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>?

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:left top;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:left bottom;
">

[ [center | left | right] && [center | top | bottom] ] <length>?

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:left top 10px;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:left top 20px;
">

¶

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:left top 50px;
">

¶

<length-percentage> ○

［横／縦］オフセット用の百分率は、基準ボックスの［横幅／縦幅］に相対的になる。［横／縦］オフセット値は、基準ボックスの左上隅からの［横／縦］オフセットを表現する。

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:10px 50px;
">

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:10px 50%;
">

<length> ○

長さ値は、固定長による基準ボックスの左上隅からの［横／縦【および Z 方向の】］オフセットを表現する。

top

縦位置用の 0% に算出される。

<IMG src="Com/Picture.jpg" style="
 transform:rotate(90deg);
 transform-origin:top;
">

<IMG src="Com/Picture.jpg" style="
 transform:skewX(20deg);
 transform-origin:top;
">

right

横位置用の 100% に算出される。

<IMG src="Com/Picture.jpg" style="
 transform:skewX(20deg);
 transform-origin:right;
">

bottom

縦位置用の 100% に算出される。

<IMG src="Com/Picture.jpg" style="
 transform:skewX(20deg);
 transform-origin:bottom;
">

left

横位置用の 0% に算出される。

<IMG src="Com/Picture.jpg" style="
 transform:skewX(20deg);
 transform-origin:left;
">

center

横位置が指定されていない場合、横位置用の 50% （したがって［50% <縦位置の指定> …］†）に算出される。他の場合、縦位置用の 50%（したがって［<横位置の指定> 50% …］†）に算出される。【† 原文の記述は変だったので修正】

<IMG src="Com/Picture.jpg" style="
 transform:skewX(20deg);
 transform-origin:center;
">

<IMG src="Com/Picture.jpg" style="
 transform:skewX(20deg);
 transform-origin:bottom center;
">

<IMG src="Com/Picture.jpg" style="
 transform:skewX(20deg);
 transform-origin:top center;
">

CSS レイアウト ボックスが結び付けられていない SVG 要素用の初期使用値は、ユーザー エージェントが次のスタイルシートを包含していたかのように、0 0 になるとする：

*:not(svg), *:not(foreignObject) > svg {
    transform-origin: 0 0;
}

transform-origin の解決値は、height の様に特別 とする。[CSSOM]

関連

transform。transform-style。

テスト