transform-origin
transform-origin
は CSS のプロパティで、要素の変形における原点を設定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
変形の原点とは、それを中心に変形が適用される点です。例えば、 rotate()
関数における変形の原点は、回転の中心です。
このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。
すなわち、
transform-origin: -100% 50%;
transform: rotate(45deg);
この定義は以下の変形と同じです。
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
既定で、変形の原点は center
です。
構文
/* 値1つの構文 */
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
プロパティは、オフセットを表す1~3つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する初期値にリセットされます。
2つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが center
だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。
- 値1つの構文:
- 値は
<length>
,<percentage>
, 又はleft
,center
,right
,top
,bottom
のうちの1つでなければなりません。
- 値は
- 値2つの構文:
- 一方の値は
<length>
,<percentage>
, 又はキーワードのleft
,center
,right
のうちの1つでなければなりません。 - もう一方の値は、
<length>
,<percentage>
, 又はキーワードのtop
,center
,bottom
のうちの1つでなければなりません。
- 一方の値は
- 値3つの構文:
- 1番目と2番目の値は、値2つの構文と同じです。
- 3番目の値は
<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% |
公式定義
初期値 | 50% 50% 0 |
---|---|
適用対象 | 変形可能要素 |
継承 | なし |
パーセント値 | 囲みボックスの寸法に対する相対値 |
計算値 | length の場合は絶対的な値、それ以外の場合はパーセント値 |
アニメーションの種類 | 長さ、パーセント値、 calc の単純なリスト |
形式文法
[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?ここで
<length-percentage> = <length> | <percentage>
例
コード | サンプル |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Transforms Level 1 transform-origin の定義 |
草案 |
ブラウザーの互換性
BCD tables only load in the browser