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

transform-originプロパティ

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

 デフォルト値はエレメントの中心(50%,50%,0)です

構文(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