Summary

-moz-transform-origin CSS プロパティは要素の transformation の原点を決めます。例えば、rotate() function の transform-origin は回転の中心です。（このプロパティは最初、プロパティの負値によって要素を移動（translate）し、次に要素を変換（transform）し、最後にプロパティの値によって移動するように適用されます。）(This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

• 初期値 : 50% 50%
• Applies to: すべてのブロックレベルとインラインレベルの要素
• 継承 : no
• Percentages: ボックス自身のサイズを参照
• Media: visual
• 計算値 : <length> は絶対値、他は割合

Syntax

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

-moz-transform-origin:  [ left | center | right ] || [ top | center | bottom ]

Values

1個または2個の値。

• 1値は水平位置を指定し、垂直位置は 50% となります。
• 2値は、1個目が水平、2個目が垂直位置を指定します。

キーワード、 <長さ> 、<割合> との組み合わせは許されますが、もしキーワードがほかの値と混在して使用された場合は 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% と同じです。

例

Using CSS transforms を参照してください。

ブラウザ互換性

仕様書

• CSS3 2D Transforms #transform-origin Working draft

参照

-moz-transform , Using CSS transforms