transform-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
transform-origin は CSS のプロパティで、要素の座標変換 (transform) における原点を設定します。
試してみましょう
transform-origin: center; transform-origin: top left; transform-origin: 50px 50px; /* 3D rotation with z-axis origin */ transform-origin: bottom right 60px; <section id="default-example"> <div id="example-container"> <div id="example-element">Rotate me!</div> <img alt="" id="crosshair" src="/shared-assets/images/examples/crosshair.svg" width="24px" /> <div id="static-element"></div> </div> </section> @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(30deg); } } @keyframes rotate3d { from { transform: rotate3d(0); } to { transform: rotate3d(1, 2, 0, 60deg); } } #example-container { width: 160px; height: 160px; position: relative; } #example-element { width: 100%; height: 100%; display: flex; position: absolute; align-items: center; justify-content: center; background: #f7ebee; color: #000000; font-size: 1.2rem; text-transform: uppercase; } #example-element.rotate { animation: rotate 1s forwards; } #example-element.rotate3d { animation: rotate3d 1s forwards; } #crosshair { width: 24px; height: 24px; opacity: 0; position: absolute; } #static-element { width: 100%; height: 100%; position: absolute; border: dotted 3px #ff1100; } "use strict"; window.addEventListener("load", () => { function update() { const selected = document.querySelector(".selected"); /* Restart the animation https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips */ el.className = ""; window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { el.className = el.style.transformOrigin.split(" ")[2] === "60px" ? "rotate3d" : "rotate"; }); }); const transformOrigin = getComputedStyle(el).transformOrigin; const pos = transformOrigin.split(/\s+/); crosshair.style.left = `calc(${pos[0]} - 12px)`; crosshair.style.top = `calc(${pos[1]} - 12px)`; } const crosshair = document.getElementById("crosshair"); const el = document.getElementById("example-element"); const observer = new MutationObserver(() => { update(); }); observer.observe(el, { attributes: true, attributeFilter: ["style"], }); update(); crosshair.style.opacity = "1"; }); 座標変換の原点とは、それを中心に座標変換が適用される点です。例えば、 rotate() 関数における座標変換の原点は、回転の中心です。
実際には、このプロパティは一対の座標変換で、その要素の他の座標変換の周りを囲みます。最初の座標変換は、原点を真の原点である に移動させます。その後、他の座標変換が適用されますが、座標変換の原点は にあるので、これらの座標変換はその原点の周りで作用します。最後に逆方向の変換を行い，座標変換の原点を元の位置に戻します。したがって，この定義は 次のようになります。
transform-origin: -100% 50%; transform: rotate(45deg); この定義は以下の座標変換と同じです。
transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); 右から左に読むと、translate(100%, -50%) は変換の原点を進の原点に移動するもので、rotate(45deg) は本来の座標変換であり、translate(-100%, 50%) は変換の原点をもとの場所に戻す変換です。
既定で、座標変換の原点は center です。
構文
/* 値１つの構文 */ 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: revert; transform-origin: revert-layer; transform-origin: unset; transform-origin プロパティは、オフセットを表す 1 ～ 3 つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する初期値にリセットされます。
単一の <length> または <percentage> が定義された場合、これは水平方向のオフセットを表します。
2 つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが center だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。
-
値 1 つの構文:
- 値は
<length>,<percentage>, またはleft,center,right,top,bottomのいずれかでなければなりません。
- 値は
-
値 2 つの構文:
- 一方の値は
<length>,<percentage>, またはキーワードのleft,center,rightのいずれかでなければなりません。 - もう一方の値は、
<length>,<percentage>, またはキーワードのtop,center,bottomのいずれかでなければなりません。
- 一方の値は
-
値 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> 値に相当します。
| Keyword | Value |
|---|---|
left | 0% |
center | 50% |
right | 100% |
top | 0% |
bottom | 100% |
公式定義
| 初期値 | 50% 50% 0 |
|---|---|
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | 囲みボックスの寸法に対する相対値 |
| 計算値 | <length> の場合は絶対的な値、それ以外の場合はパーセント値 |
| アニメーションの種類 | 長さ、パーセント値、 calc の単純なリスト |
メモ: transform-origin の初期値は、ルートの <svg> 要素と foreignObject の直接の子である <svg> 要素を除いたすべての SVG 要素では 0 0 です。また、 transform-origin は他の CSS 要素と同様に 50% 50% です。詳しくは SVG の transform-origin 属性を参照してください。
形式文法
transform-origin =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? |
[ [ center | left | right ] && [ center | top | bottom ] ] <length>?
<length-percentage> =
<length> |
<percentage>
例
様々な座標変換値のデモ
この例は、様々な変換関数で様々なt transform-origin の値を選択した場合の効果を表します。
仕様書
| Specification |
|---|
| CSS Transforms Module Level 1 # transform-origin-property |