transform-originCSS のプロパティで、要素の変形 (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
transform-originChrome 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -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 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
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 完全対応 12.1
完全対応 12.1
完全対応 11
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS ? Samsung Internet Android ?
Three-value syntaxChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 10IE 完全対応 9Opera 未対応 なしSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 10Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
Support in SVG
実験的
Chrome 完全対応 ありEdge 完全対応 17Firefox 完全対応 43
補足
完全対応 43
補足
補足 Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
未対応 41 — 43
補足 無効
補足 Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
無効 From version 41 until version 43 (exclusive): 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 完全対応 43
補足
完全対応 43
補足
補足 Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
未対応 41 — 43
補足 無効
補足 Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
無効 From version 41 until version 43 (exclusive): this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

関連情報

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

最終更新者: mdnwebdocs-bot,