CSStransform-origin プロパティは、要素の変形 (transform) における原点を設定します。

変形の原点とは、それを中心に変形が適用される点です。例えば、 rotate() 関数による変形の原点は、回転の中心です。 (このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。)

構文

/* 値1つの構文 */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* グローバル値 */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

transform-origin プロパティは、オフセットを表す1~3つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する初期値にリセットされます。

2つ以上の値が定義され、どちらもの値もキーワードでない場合、又は使われているキーワードが center だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。

  • 値1つの構文:
    • 値は <length>, <percentage>, 又は left, center, right, top, bottom のうちの1つでなければなりません。
  • 値2つの構文:
    • 一方の値は <length>, <percentage>, 又はキーワードの left, center, right のうちの1つでなければなりません。
    • もう一方の値は、 <length>, <percentage>, 又はキーワードの top, center, bottom のうちの1つでなければなりません。
  • 値3つの構文:
    • 1番目と2番目の値は、値2つの構文と同じです。
    • 3番目の値は <length> でなければなりません。これは常に Z オフセットを表します。

x-offset
<length> または <percentage> の、ボックスの左端から変形の原点までの距離を示す値です。
offset-keyword
left, right, top, bottom, center のいずれかのキーワードで、対応するオフセットを表します。
y-offset
<length> または <percentage> の、ボックスの右端から変形の原点までの距離を示す値です。
x-offset-keyword
left, right, center のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。
y-offset-keyword
top, bottom, center のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。
z-offset
<length> 値 ( <percentage> は無効です) で、ユーザーの目と z=0 原点の距離を示します。

キーワードは便利に速記ができ、次の <percentage> 値に相当します。

キーワード
left 0%
center 50%
right 100%
top 0%
bottom 100%

形式文法

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

where
<length-percentage> = <length> | <percentage>

コード サンプル

transform: none;

transform: rotate(30deg);

transform: rotate(30deg);
transform-origin: 0 0;

transform: rotate(30deg);
transform-origin: 100% 100%;

transform: rotate(30deg);
transform-origin: -1em -3em;

transform: scale(1.7);

transform: scale(1.7);
transform-origin: 0 0;

transform: scale(1.7);
transform-origin: 100% -30%;

transform: skewX(50deg);
transform-origin: 100% -30%;

transform: skewY(50deg);
transform-origin: 100% -30%;

仕様書

仕様書 状態 備考
CSS Transforms Level 1
transform-origin の定義
草案

初期値50% 50% 0
適用対象変形可能要素
継承なし
パーセンテージbounding box のサイズ
メディア視覚
計算値<length> の場合は絶対的な値、さもなくばパーセンテージ
アニメーションの種類length, percentage, calc の単純なリスト
正規順序One or two values, with length made absolute and keywords translated to percentages

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 16
完全対応 16
完全対応 3.5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10
完全対応 10
完全対応 9
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 12.1
完全対応 12.1
完全対応 10.5
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 3.1
接頭辞付き
完全対応 3.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android ? Chrome Android ? Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 16
完全対応 16
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
Three-value syntaxChrome 完全対応 ありEdge ? Firefox 完全対応 10IE 完全対応 9Opera 未対応 なしSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
Support in SVG
実験的
Chrome 完全対応 ありEdge ? Firefox 完全対応 43
補足
完全対応 43
補足
補足 Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
未対応 41 — ?
補足 無効
補足 Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
無効 From version 41: this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,