これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
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 の利用 をご覧ください。
実動例
| コード | サンプル |
|---|---|
|
|
<div class="box1"> </div>
.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-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);
-moz-transform: rotate(30deg);
-o-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;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-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%;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
|
|
|
<div class="box5"> </div>
.box5 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: -10em -30em;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
|
|
|
<div class="box6"> </div>
.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
}
|
|
|
<div class="box7"> </div>
.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
}
|
|
|
<div class="box8"> </div>
.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
-moz-transform-origin: 100% -30%;
-o-transform-origin: 100% -30%;
}
|
|
|
<div class="box9"> </div>
.box9 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewX(50deg);
trasnform-origin: 100% -30%;
-webkit-transform: skewX(50deg);
-moz-transform: skewX(50deg);
-o-transform: skewX(50deg);
}
|
|
|
<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);
-moz-transform: skewY(50deg);
-o-transform: skewY(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
-moz-transform-origin: 100% -30%;
-o-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 をご覧ください。
