transform-origin プロパティ
transform-origin プロパティは、エレメントの回転、拡大/縮小、傾斜、移動といった変形ができるtransformプロパティの基準点(中心)を指定する CSS のプロパティです。
指定値はエレメントのサイズから%で指定します。左から(X軸、Y軸、Z軸)の値です。ワード left、center、right、top、center、bottom でも指定することができます。
デフォルト値はエレメントの中心で"50% 50% 0"です。
transform-origin: 0% 100%; transform: rotate(40deg);
ページ内 Index
構文(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長さの単位を参照のこと。以下のキーワードも使用できる。
|
y-axis | 数値で指定、CSS長さの単位を参照のこと。以下のキーワードも使用できる。
|
z-axis | 数値で指定、CSS長さの単位を参照のこと |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | 50% 50% 0 |
継承(Inherited) | No |
CSS Animation | No |
Example
transform-origin の例です。transformプロパティの設定が必要です。
rotate()関数による回転例です。エレメントの左端で最下端を中心に40°回転しています。left bottomと指定しても同じです。
関連する CSS プロパティ
以下は transform-origin に関連する CSS プロパティです。
プロパティ名 | 概要 |
---|---|
transform | エレメントの回転、拡大/縮小、傾斜、移動を指定 |
transform-box | レイアウトボックス |
transform-origin | 中心位置の指定 |
rotate() | 回転の関数 |
scale() | 拡大/縮小の関数 |
skew() | 傾斜の関数 |
translate() | 移動 |