transform-origin プロパティ

　transform-origin プロパティは、エレメントの回転、拡大/縮小、傾斜、移動といった変形ができるtransformプロパティの基準点（中心）を指定する CSS のプロパティです。

　指定値はエレメントのサイズから％で指定します。左から（X軸、Y軸、Z軸）の値です。ワード left、center、right、top、center、bottom でも指定することができます。

　デフォルト値はエレメントの中心で"50% 50% 0"です。

エレメントの左端で最下端を中心に 40° 回転（Exampleを参照）

transform-origin: 0% 100%;
transform: rotate(40deg);

詳しくは Example を参照してください

構文(Syntax)

transform-origin: [ x-axis y-axis z-axis ] | initial | inherit;

値の取得

String = object.style.transformOrigin;

値の設定

object.style.transformOrigin="[ x-axis y-axis z-axis ] | initial | inherit";

Value	摘要
50% 50% 0	初期値（default値）
x-axis	数値で指定、CSS長さの単位を参照のこと。以下のキーワードも使用できる。 left center right
y-axis	数値で指定、CSS長さの単位を参照のこと。以下のキーワードも使用できる。 top center bottom
z-axis	数値で指定、CSS長さの単位を参照のこと
initial	初期値に戻す
inherit	親エレメントのプロパティを継承

　transform-origin の例です。transformプロパティの設定が必要です。
　rotate()関数による回転例です。エレメントの左端で最下端を中心に40°回転しています。left bottomと指定しても同じです。