path: root/files/ja/web/css/transform-origin/index.html

---
title: transform-origin
slug: Web/CSS/transform-origin
tags:
  - CSS
  - CSS Property
  - CSS Transforms
  - Reference
  - 'default value: center'
  - 'recipe:css-property'
  - transform-origin
translation_of: Web/CSS/transform-origin
---
<div>{{ CSSRef }}</div>

<p><strong><code>transform-origin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<ruby>変形<rp> (</rp><rt>transform</rt><rp>) </rp></ruby>における原点を設定します。</p>

<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<p>変形の原点とは、それを中心に変形が適用される点です。例えば、 <code><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate()</a></code> 関数における変形の原点は、回転の中心です。</p>

<p>このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。<br>
 すなわち、</p>

<pre class="brush: css notranslate">transform-origin: -100% 50%;
transform: rotate(45deg);
</pre>

<p>この定義は以下の変形と同じです。</p>

<pre class="brush: css notranslate">transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);</pre>

<p>既定で、変形の原点は <code>center</code> です。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css notranslate">/* 値１つの構文 */
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;
</pre>

<p><code>transform-origin</code> プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する<a href="/ja/docs/Web/CSS/initial_value">初期値</a>にリセットされます。</p>

<p>２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが <code>center</code> だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。</p>

<ul>
 <li>値１つの構文:
  <ul>
   <li>値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又は <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, <code>bottom</code> のうちの１つでなければなりません。</li>
  </ul>
 </li>
 <li>値２つの構文:
  <ul>
   <li>一方の値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又はキーワードの <code>left</code>, <code>center</code>, <code>right</code> のうちの１つでなければなりません。</li>
   <li>もう一方の値は、 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又はキーワードの <code>top</code>, <code>center</code>, <code>bottom</code> のうちの１つでなければなりません。</li>
  </ul>
 </li>
 <li>値３つの構文:
  <ul>
   <li>１番目と２番目の値は、値２つの構文と同じです。</li>
   <li>３番目の値は {{cssxref("&lt;length&gt;")}} でなければなりません。これは常に Z オフセットを表します。</li>
  </ul>
 </li>
</ul>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><var>x-offset</var></dt>
 <dd>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの左端から変形の原点までの距離を示す値です。</dd>
 <dt><var>offset-keyword</var></dt>
 <dd><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>center</code> のいずれかのキーワードで、対応するオフセットを表します。</dd>
 <dt><var>y-offset</var></dt>
 <dd>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの右端から変形の原点までの距離を示す値です。</dd>
 <dt><var>x-offset-keyword</var></dt>
 <dd><code>left</code>, <code>right</code>, <code>center</code> のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。</dd>
 <dt><var>y-offset-keyword</var></dt>
 <dd><code>top</code>, <code>bottom</code>, <code>center</code> のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。</dd>
 <dt><var>z-offset</var></dt>
 <dd>{{cssxref("&lt;length&gt;")}} 値 ({{cssxref("&lt;percentage&gt;")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。</dd>
</dl>

<p>キーワードは便利な速記であり、次の {{cssxref("&lt;percentage&gt;")}} 値に相当します。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">キーワード</th>
   <th scope="col">値</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>left</code></td>
   <td><code>0%</code></td>
  </tr>
  <tr>
   <td><code>center</code></td>
   <td><code>50%</code></td>
  </tr>
  <tr>
   <td><code>right</code></td>
   <td><code>100%</code></td>
  </tr>
  <tr>
   <td><code>top</code></td>
   <td><code>0%</code></td>
  </tr>
  <tr>
   <td><code>bottom</code></td>
   <td><code>100%</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{CSSInfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>コード</th>
   <th>サンプル</th>
  </tr>
  <tr>
   <td>
    <p><code>transform: none;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_none">
    <pre class="brush: html notranslate">
&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
-webkit-transform: none;
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_only">
    <pre class="brush: html notranslate">
&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.box2 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br>
     transform-origin: 0 0;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate">
    <pre class="brush: html notranslate">
&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.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);
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br>
     transform-origin: 100% 100%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_with_percentage">
    <pre class="brush: html notranslate">
&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.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);
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br>
     transform-origin: -1em -3em;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_with_em">
    <pre class="brush: html notranslate">
&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.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);
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.7);</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale_only">
    <pre class="brush: html notranslate">
&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(<code>1.7</code>);
-webkit-transform: scale(<code>1.7</code>);
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.7);<br>
     transform-origin: 0 0;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale_without_origin">
    <pre class="brush: html notranslate">
&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(<code>1.7</code>);
-webkit-transform: scale(<code>1.7</code>);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.7);<br>
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale">
    <pre class="brush: html notranslate">
&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(<code>1.7</code>);
-webkit-transform: scale(<code>1.7</code>);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: skewX(50deg);<br>
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_skew_x">
    <pre class="brush: html notranslate">
&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.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%;
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: skewY(50deg);<br>
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_skew_y">
    <pre class="brush: html notranslate">
&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css notranslate">
.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%;
}
</pre>
    </div>

    <div>{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}</div>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td>
   <td>{{ Spec2('CSS3 Transforms') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.transform-origin")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/Using_CSS_transforms">CSS 変形の使用</a></li>
 <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li>
</ul>