transform-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

transform-originCSS のプロパティで、要素の座標変換 (transform) における原点を設定します。

試してみましょう

座標変換の原点とは、それを中心に座標変換が適用される点です。例えば、 rotate() 関数における座標変換の原点は、回転の中心です。

実際には、このプロパティは一対の座標変換で、その要素の他の座標変換の周りを囲みます。最初の座標変換は、原点を真の原点である (0,0) に移動させます。その後、他の座標変換が適用されますが、座標変換の原点は (0,0) にあるので、これらの座標変換はその原点の周りで作用します。最後に逆方向の変換を行い,座標変換の原点を元の位置に戻します。したがって,この定義は 次のようになります。

css
transform-origin: -100% 50%;
transform: rotate(45deg);

この定義は以下の座標変換と同じです。

css
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

右から左に読むと、translate(100%, -50%) は変換の原点を進の原点に移動するもので、rotate(45deg) は本来の座標変換であり、translate(-100%, 50%) は変換の原点をもとの場所に戻す変換です。

既定で、座標変換の原点は center です。

構文

css
/* 値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: revert;
transform-origin: revert-layer;
transform-origin: unset;

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

単一の <length> または <percentage> が定義された場合、これは水平方向のオフセットを表します。

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

  • 値 1 つの構文:

    • 値は <length>, <percentage>, または left, center, right, top, bottom のいずれかでなければなりません。
  • 値 2 つの構文:

    • 一方の値は <length>, <percentage>, またはキーワードの left, center, right のいずれかでなければなりません。
    • もう一方の値は、 <length>, <percentage>, またはキーワードの top, center, bottom のいずれかでなければなりません。
  • 値 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> 値に相当します。

Keyword Value
left 0%
center 50%
right 100%
top 0%
bottom 100%

公式定義

初期値50% 50% 0
適用対象座標変換可能要素
継承なし
パーセント値囲みボックスの寸法に対する相対値
計算値<length> の場合は絶対的な値、それ以外の場合はパーセント値
アニメーションの種類長さ、パーセント値、 calc の単純なリスト

メモ: transform-origin の初期値は、ルートの <svg> 要素と foreignObject の直接の子である <svg> 要素を除いたすべての SVG 要素では 0 0 です。また、 transform-origin は他の CSS 要素と同様に 50% 50% です。詳しくは SVG の transform-origin 属性を参照してください。

形式文法

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

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

様々な座標変換値のデモ

この例は、様々な変換関数で様々なt transform-origin の値を選択した場合の効果を表します。

仕様書

Specification
CSS Transforms Module Level 1
# transform-origin-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transform-origin
bottom
center
left
right
On SVG elements
Three-value syntax
top

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報