備忘録的プログラミングリファレンス

transform-originプロパティ

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

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

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

エレメントの左端で最下端を中心に40°回転(Exampleを参照
transform-origin: 0% 100%;
transform: rotate(40deg);

構文(Syntax)

CSS

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

DOM(JavaScript)

値の取得
String = object.style.transformOrigin;
値の設定
object.style.transformOrigin="[ x-axis y-axis z-axis ] | initial | inherit";

値(Values)

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

備考(Remarks)

初期値(Default value)50% 50% 0
継承(Inherited)No
CSS AnimationNo

Example

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