transform-origin は CSS のプロパティで、要素の変形における原点を設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
変形の原点とは、それを中心に変形が適用される点です。例えば、 rotate() 関数における変形の原点は、回転の中心です。 (このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。)
構文
/* 値１つの構文 */ 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 プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する初期値にリセットされます。
２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが center だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。
- 値１つの構文:
- 値は
<length>,<percentage>, 又はleft,center,right,top,bottomのうちの１つでなければなりません。
- 値は
- 値２つの構文:
- 一方の値は
<length>,<percentage>, 又はキーワードのleft,center,rightのうちの１つでなければなりません。 - もう一方の値は、
<length>,<percentage>, 又はキーワードのtop,center,bottomのうちの１つでなければなりません。
- 一方の値は
- 値３つの構文:
- １番目と２番目の値は、値２つの構文と同じです。
- ３番目の値は
<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>
例
| コード | サンプル |
|---|---|
|
|
<div class="box1"> </div>
.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
-webkit-transform: none;
}
|
|
|
<div class="box2"> </div>
.box2 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
|
|
|
<div class="box3"> </div>
.box3 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
|
|
|
<div class="box4"> </div>
.box4 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
|
|
|
<div class="box5"> </div>
.box5 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: -1em -3em;
-webkit-transform-origin: -1em -3em;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
|
|
|
<div class="box6"> </div>
.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(
|
|
|
<div class="box7"> </div>
.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(
|
|
|
<div class="box8"> </div>
.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(
|
|
|
<div class="box9"> </div>
.box9 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewX(50deg);
-webkit-transform: skewX(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
|
|
|
<div class="box10"> </div>
.box10 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewY(50deg);
-webkit-transform: skewY(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
|
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Transforms Level 1 transform-origin の定義 |
草案 |
| 初期値 | 50% 50% 0 |
|---|---|
| 適用対象 | 変形可能要素 |
| 継承 | なし |
| パーセンテージ | bounding box のサイズ |
| 計算値 | length の場合は絶対的な値、さもなくばパーセンテージ |
| アニメーションの種類 | length, percentage, calc の単純なリスト |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
transform-origin | Chrome
完全対応
36
| Edge
完全対応
12
| Firefox
完全対応
16
| IE
完全対応
10
| Opera
完全対応
23
| Safari
完全対応
9
| WebView Android
完全対応
37
| Chrome Android
完全対応
36
| Firefox Android
完全対応
16
| Opera Android
完全対応
24
| Safari iOS
完全対応
9
| Samsung Internet Android
完全対応
3.0
|
| Support in SVG | Chrome 完全対応 19 | Edge 完全対応 17 | Firefox
完全対応
43
| IE 未対応 なし | Opera 完全対応 15 | Safari
完全対応
6
| WebView Android 完全対応 ≤37 | Chrome Android 完全対応 25 | Firefox Android
完全対応
43
| Opera Android 完全対応 14 | Safari iOS
完全対応
6
| Samsung Internet Android 完全対応 1.5 |
| Three-value syntax | Chrome 完全対応 12 | Edge 完全対応 12 | Firefox 完全対応 10 | IE 完全対応 9 | Opera 完全対応 15 | Safari 完全対応 5 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 10 | Opera Android 完全対応 14 | Safari iOS 完全対応 3.2 | Samsung Internet Android 完全対応 1.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。