これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

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

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

初期値50% 50% 0
適用対象変形可能要素
継承不可
相対値の基準bounding box のサイズ
メディアvisual
計算値length の場合は絶対的な値、さもなくばパーセンテージ
Animation typeの単純なリスト形式$1$、length または percentage, calc();
正規順序One or two values, with length made absolute and keywords translated to percentages

構文

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

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

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

/* 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;

/* y-offset x-offset-keyword z-offset */
transform-origin: 2px left 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;

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>

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

実動例

コード サンプル

transform: none;

transform: rotate(30deg);

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

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

transform: rotate(30deg);
transform-origin: -10em -30em;

transform: scale(1.9);

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

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

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

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

仕様

仕様書 策定状況 コメント
CSS Transforms Level 1
transform-origin の定義
草案  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) -webkit 3.5 (1.9.1)-moz
16.0 (16.0)
9.0-ms
10.0
10.5-o
12.10
3.1-webkit
3-値構文 (有) -webkit 10 (10)-moz
16.0 (16.0)
5.5 (partial) [1]
9.0 -ms
10.0
未サポート (有) -webkit
SVG のサポート (有) 41 (41)[3]
43 (43)[4]
未サポート (有) ?
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? 8.1 -webkit [2] ? ?
3-値構文 ? ? ? ? 未サポート ?
SVG のサポート ? 41 (41) [3]
43 (43) [4]
? ? ? ?

[1] Internet Explorer 5.5 以降はプロプライエタリな Matrix Filter をサポートしており、これを使うと同様の効果を実現できます。

[2] MSDN の transform-origin のドキュメントをご覧ください。

[3] SVG 要素に対する transform-origin の割合値の処理は設定項目 svg.transform-origin.enabled で制御しており、既定値は false です。キーワードや割合値はオブジェクト自身ではなく canvas を参照します。バグ 1209061 をご覧ください。

[4] キーワードや割合値はオブジェクト自身ではなく canvas を参照します。バグ 1209061 をご覧ください。

関連情報

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

 このページの貢献者: Simplexible, yyss, Sebastianz, Prinz_Rana, fscholz, ethertank, sosleepy, Level, FredB
 最終更新者: Simplexible,