transform-origin

概要

CSS の transform-origin プロパティは要素の原点を決めます。例えば、rotate() 関数は transform-origin を中心にして回転します。（このプロパティは、最初にプロパティの負値によって要素を平行移動 (translate)し、次に要素を変換 (transform)し、最後にプロパティの値によって平行移動して適用されます。）

明示的にセットされていない値は、対応する値にリセットされることに注意してください。

• 初期値50% 50% 0
• 適用対象transform 可能要素
• 継承しない
• 相対値の基準bounding box のサイズ
• メディアvisual
• 計算値絶対的な length または percentage
• アニメーションの可否可

構文

形式文法: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?

transform-origin: x-offset                                   /* 1-値構文 */   E.g.  transform-origin: 2px 
transform-origin: offset-keyword                                             E.g.  transform-origin: bottom

transform-origin: x-offset y-offset                          /* 2-値構文 */   E.g.  transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword                                  E.g.  transform-origin: 2px left
transform-origin: x-offset-keyword y-offset                                  E.g.  transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword                          E.g.  transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword                          E.g.  transform-origin: top right

transform-origin: x-offset y-offset z-offset                 /* 3-値構文 */   E.g.  transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset                         E.g.  transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset                         E.g.  transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset                 E.g.  transform-origin: right bottom 2cm
transform-origin: y-offset-keyword x-offset-keyword z-offset                 E.g.  transform-origin: bottom right 2cm

値

x-offset

<length> または <割合> の、ボックスの左端から変換の原点までの距離を示す値です。

offset-keyword

left, right, top, bottom, center のいずれかのキーワードで、対応するオフセットを表します。

y-offset

<length> または <割合> の、ボックスの右端から変換の原点までの距離を示す値です。

x-offset-keyword

left, right, center のいずれかのキーワードで、ボックスの左端から変換の原点までの距離を示します。

y-offset-keyword

top, bottom, center のいずれかのキーワードで、ボックスの上端から変換の原点までの距離を示します。

z-offset

<length> 値 ( <割合> は無効です) で、ユーザーの目と z=0 原点の距離を示します。

キーワードは便利な略記で、次の <割合> 値に相当します:

例

CSS transforms の利用 をご覧ください。

実動例

解説：値

3個までの値。

• 1-値構文は基本的に水平位置を指定し、垂直位置は 50% となります。
• 2-値構文は基本的に1個目が水平、2個目が垂直位置を指定します。
• 3-値構文は基本的に1個目が水平、2個目が垂直、3個目が奥行き方向を指定します。

※以下の記述は 1-値構文または 2-値構文に関するものです

キーワード、<length>、<割合> との組み合わせは許されますが、もしキーワードがほかの値と混在して使用された場合は left と right は1番目の値として、top と bottom は2番目の値としてだけ使用されます。負の位置も許可されています。

<percentage>

0% 0%、（または単に 0 0）の場合、transform-origin はボックスの左上コーナーとなります。100% 100% は transform-origin を右下コーナーに設定します。14% 84% はボックスの右に 14%、下に 84% の位置に transform-origin を設定します。

<length>

2cm 1cm の場合、transform-origin は要素の左上から右に 2cm、下に 1cm の位置です。

top left | left top

0 0 と同じです。

top | top center | center top

50% 0 と同じです。

right top | top right

100% 0 と同じです。

left | left center | center left

0 50% と同じです。

center | center center

50% 50% と同じです（デフォルト値）。

right | right center | center right

100% 50% と同じです。

bottom left | left bottom

0 100% と同じです。

bottom | bottom center | center bottom

50% 100% と同じです。

bottom right | right bottom

100% 100% と同じです。

仕様

ブラウザ実装状況

関連情報

• CSS Transforms の利用
• transform 関連 CSS プロパティ : backface-visibility 、 perspective 、 perspective-origin 、 transform 、 transform-origin 、 transform-style