transform

  • リビジョンの URL スラッグ: Web/CSS/transform
  • リビジョンのタイトル: transform
  • リビジョンの ID: 404977
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

{{CSSRef}} {{SeeCompatTable}}

概要

transform CSS プロパティは CSS 視覚整形モデルの座標空間を変更できるようにします。これを用いると、要素を移動、回転、スケーリング、傾斜させることができます。

{{cssbox("transform")}}

構文

transform:  <transform-function>+ | none

<transform-function>
1個以上の {{anch("CSS transform functions")}}。下記参照。
none
transform は何も適用されないことを示す。

CSS transforms の利用 を参照。

実働例

pre {
  width: 33em;
  border: solid red;

  -webkit-transform: translate(100px) rotate(10deg);
  -webkit-transform-origin: 60% 100%;

  -o-transform: translate(100px) rotate(10deg);
  -o-transform-origin: 60% 100%;

  transform: translate(100px) rotate(10deg);
  transform-origin: 60% 100%;
}

CSS 変換関数

transform CSS プロパティは要素で使用される座標システムを transform 関数 を用いて操作できるようにします。これらの関数は以下に記述されています。

matrix(行列)

transform:  matrix(a, c, b, d, tx, ty)

/* a, b, c, d は変換行列を構成します 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   tx, ty は移動量です(translate values)  */

6 値からなる 2D 変換行列を指定します。これは matrix [a b c d tx ty] と同じです。

注記:  古いバージョンの Gecko (Firefox) は txty として {{Xref_csslength}} 値を受け付けます。現在の Gecko、Webkit(Safari、Chrome)、Opera は、 txty として単位の無い {{Xref_cssnumber}} をサポートします。

実働例

 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
background: wheat;
max-width: intrinsic;  max-width: -moz-fit-content;

-webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
     -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
        transform: matrix(1, 0, 0.6, 1,  250, 0);

参照

rotate(回転)

transform:  rotate(angle);      /* an {{Xref_cssangle}}, e.g.  rotate(30deg) */

要素をその原点({{Cssxref("-moz-transform-origin")}} で指定)を中心に時計回りに指定された angle だけ回転させます。この操作は matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] に対応します。

scale(スケーリング)

transform:  scale(sx[, sy]);     /* one or two unitless {{Xref_cssnumber}}s, e.g.  scale(2.1,4) */

[sx, sy] で記述される 2D スケーリング操作を指定します。sy が指定されていない場合は、sx と同じであるとみなされます。

scaleX

transform:  scaleX(sx);          /* a unitless {{Xref_cssnumber}}, e.g.  scaleX(2.7) */

vector [sx, 1] を用いたスケーリングを指定します。

scaleY

transform:  scaleY(sy)           /* a unitless {{Xref_cssnumber}}, e.g.  scaleY(0.3) */

vector [1, sy] を用いたスケーリングを指定します。

skew(傾斜)

transform:  skew(ax[, ay])       /* one or two {{Xref_cssangle}}, e.g.  skew(30deg,-10deg) */

要素を X 軸または Y 軸に対して指定された角度だけ傾斜させます。ay が指定されていない場合は、Y 軸に対しては傾斜は適用されません。

注記: skew() 関数は初期の草案に存在しました。この関数は取り除かれましたが、一部の実装にはまだ残されています。これは使わないでください。

同じ効果を得るために、skew() に1 つの引数を与えて使っていたのなら skewX() を、汎用的には matrix(1, tan(ay), tan(ax), 1, 0, 0) を使ってください。ここで tan() は CSS 関数ではなく、自分で計算する必要がある点に注意してください。

skewX

transform:  skewX(angle)         /* an {{Xref_cssangle}}, e.g.  skewX(-30deg) */

要素を X 軸に対して指定された angle だけ傾斜させます。

skewY

transform:  skewY(angle)         /* an {{Xref_cssangle}}, e.g.  skewY(4deg) */

要素を Y 軸に対して指定された angle だけ傾斜させます。

translate(移動)

transform:  translate(tx[, ty])  /* one or two {{Xref_csslength}} values */

vector [tx, ty] による 2D 移動を指定します。ty が指定されていない場合は、値は0とみなされます。

<translation-value> 引数は <length> 値か <percentage> 値のいずれかです。

translateX

transform:  translateX(tx)       /* see {{Xref_csslength}} for possible values */

要素を X 軸にそって指定量だけ移動します。

translateY

transform:  translateY(ty)       /* see {{Xref_csslength}} for possible values */

要素を Y 軸にそって指定量だけ移動します。

仕様

仕様 策定状況 コメント
{{SpecName('CSS3 Transforms', '#transform', 'transform')}} {{Spec2('CSS3 Transforms')}}  

ブラウザ実装状況

{{CompatibilityTable}}
機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート {{CompatVersionUnknown}} {{property_prefix("-webkit")}} {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}
{{CompatGeckoDesktop("16.0")}}
9.0 {{property_prefix("-ms")}}
10.0
10.5{{property_prefix("-o")}}
12.10
3.1{{property_prefix("-webkit")}}
3D のサポート 12.0{{property_prefix("-webkit")}} 10.0{{property_prefix("-moz")}}
{{CompatGeckoDesktop("16.0")}}
10.0 {{CompatNo}} 4.0{{property_prefix("-webkit")}}
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

注記

Internet Explorer 5.5 以降はプロプライエタリな Matrix Filter を使って同様の効果を得ることができます。

Gecko 14.0 は skew()の実験的なサポートを取り除きましたが、Gecko 15.0 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。

関連情報

このリビジョンのソースコード

<div>{{CSSRef}} {{SeeCompatTable}}</div>



<h2 id="Summary" name="Summary">概要</h2>
<p><code>transform</code> CSS プロパティは CSS 視覚整形モデルの座標空間を変更できるようにします。これを用いると、要素を移動、回転、スケーリング、傾斜させることができます。</p>



<div>{{cssbox("transform")}}</div>


<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">
transform:  &lt;transform-function&gt;+ | none
</pre>



<h2 id="Values" name="Values">値</h2>
<dl>
  <dt>&lt;transform-function&gt;</dt>
  <dd>1個以上の {{anch("CSS transform functions")}}。下記参照。</dd>
  <dt>none</dt>
  <dd>transform は何も適用されないことを示す。</dd>
</dl>



<h2 id="Examples" name="Examples">例</h2>
<p><a href="/ja/docs/CSS/Using_CSS_transforms" title="CSS/Using CSS transforms">CSS transforms の利用</a> を参照。</p>



<h3 id="Live_Example" name="Live_Example">実働例</h3>


<pre style="width:33em; border:solid red; -webkit-transform:translate(100px) rotate(10deg); -webkit-transform-origin:60% 100%; -o-transform:translate(100px) rotate(10deg); -o-transform-origin:60% 100%; transform: translate(100px) rotate(10deg); transform-origin:60% 100%;">
pre {
  width: 33em;
  border: solid red;

  -webkit-transform: translate(100px) rotate(10deg);
  -webkit-transform-origin: 60% 100%;

  -o-transform: translate(100px) rotate(10deg);
  -o-transform-origin: 60% 100%;

  transform: translate(100px) rotate(10deg);
  transform-origin: 60% 100%;
}
</pre>




<h2 id="CSS_transform_functions" name="CSS_transform_functions">CSS 変換関数</h2>
<p><code>transform</code> CSS プロパティは要素で使用される座標システムを <strong>transform 関数</strong> を用いて操作できるようにします。これらの関数は以下に記述されています。</p>



<h3 id="matrix" name="matrix">matrix(行列)</h3>
<pre>
transform:  matrix(a, c, b, d, tx, ty)

/* a, b, c, d は変換行列を構成します 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   tx, ty は移動量です(translate values)  */
</pre>



<p>6 値からなる 2D 変換行列を指定します。これは <strong>matrix [a b c d tx ty]</strong> と同じです。</p>



<div class="note">
  <strong>注記:</strong>&nbsp; 古いバージョンの Gecko (Firefox) は <strong>tx</strong> と <strong>ty</strong> として {{Xref_csslength}} 値を受け付けます。現在の Gecko、Webkit(Safari、Chrome)、Opera は、 <strong>tx</strong> と <strong>ty</strong> として単位の無い {{Xref_cssnumber}} をサポートします。</div>



<h4 id="matrix_live_examples" name="matrix_live_examples">実働例</h4>
<pre style="background:gold; width:400px; -moz-transform:matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform:matrix(1, -0.2, 0, 1, 0, 0);-o-transform:matrix(1, -0.2, 0, 1, 0, 0);-ms-transform:matrix(1, -0.2, 0, 1, 0, 0); transform:matrix(1, -0.2, 0, 1, 0, 0);">
 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
</pre>
<pre style="background:wheat; max-width:intrinsic; max-width:-moz-fit-content; -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); -o-transform: matrix(1, 0, 0.6, 1, 250, 0); -ms-transform: matrix(1, 0, 0.6, 1, 250, 0); transform: matrix(1, 0, 0.6, 1, 250, 0);">
background: wheat;
max-width: intrinsic;  max-width: -moz-fit-content;

-webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
     -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
        transform: matrix(1, 0, 0.6, 1,  250, 0);
</pre>



<h4 id="matrix-See_also" name="matrix-See_also">参照</h4>
<ul>
  <li><a href="http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices" title="http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices">Examples of linear transformation matrices</a> Wikipedia</li>
  <li><a href="http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html" title="http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html">Coordinate transformation matrices</a> mathamazement.com</li>
  <li><a href="http://msdn.microsoft.com/ja-jp/library/ms533014(VS.85,loband).aspx">Microsoft's matrix filter</a> MSDN</li>
</ul>



<h3 id="rotate" name="rotate">rotate(回転)</h3>
<pre>
transform:  rotate(angle);      /* an {{Xref_cssangle}}, e.g.  rotate(30deg) */</pre>
<p>要素をその原点({{Cssxref("-moz-transform-origin")}} で指定)を中心に時計回りに指定された <code>angle</code> だけ回転させます。この操作は matrix <strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</strong> に対応します。</p>



<h3 id="scale" name="scale">scale(スケーリング)</h3>
<pre>
transform:  scale(sx[, sy]);     /* one or two unitless {{Xref_cssnumber}}s, e.g.  scale(2.1,4) */</pre>
<p><strong>[sx, sy]</strong> で記述される 2D スケーリング操作を指定します。<code>sy</code> が指定されていない場合は、<code>sx</code> と同じであるとみなされます。</p>


<h3 id="scaleX" name="scaleX">scaleX</h3>
<pre>
transform:  scaleX(sx);          /* a unitless {{Xref_cssnumber}}, e.g.  scaleX(2.7) */</pre>
<p>vector <strong>[sx, 1]</strong> を用いたスケーリングを指定します。</p>


<h3 id="scaleY" name="scaleY">scaleY</h3>
<pre>
transform:  scaleY(sy)           /* a unitless {{Xref_cssnumber}}, e.g.  scaleY(0.3) */</pre>
<p>vector <strong>[1, sy]</strong> を用いたスケーリングを指定します。</p>





<h3 id="skew" name="skew">skew(傾斜)</h3>
<pre>
transform:  skew(ax[, ay])       /* one or two {{Xref_cssangle}}, e.g.  skew(30deg,-10deg) */</pre>
<p>要素を X 軸または Y 軸に対して指定された角度だけ傾斜させます。<code>ay</code> が指定されていない場合は、Y 軸に対しては傾斜は適用されません。</p>
<div class="note">
  <strong>注記:</strong> <code>skew()</code> 関数は初期の草案に存在しました。この関数は取り除かれましたが、一部の実装にはまだ残されています。これは使わないでください。<br />
  <br />
  同じ効果を得るために、<code>skew()</code> に1 つの引数を与えて使っていたのなら <code>skewX()</code> を、汎用的には <code>matrix(1, <em>tan(</em>ay<em>)</em></code><em>, </em><code><em>tan(</em>ax<em>)</em>, 1, 0, 0)</code> を使ってください。ここで <em>tan()</em> は CSS 関数ではなく、自分で計算する必要がある点に注意してください。</div>


<h3 id="skewX" name="skewX">skewX</h3>
<pre>
transform:  skewX(angle)         /* an {{Xref_cssangle}}, e.g.  skewX(-30deg) */</pre>
<p>要素を X 軸に対して指定された <code>angle</code> だけ傾斜させます。</p>


<h3 id="skewY" name="skewY">skewY</h3>
<pre>
transform:  skewY(angle)         /* an {{Xref_cssangle}}, e.g.  skewY(4deg) */</pre>
<p>要素を Y 軸に対して指定された <code>angle</code> だけ傾斜させます。</p>



<h3 id="translate" name="translate">translate(移動)</h3>


<pre>
transform:  translate(tx[, ty])  /* one or two {{Xref_csslength}} values */</pre>
<p>vector <strong>[tx, ty]</strong> による 2D 移動を指定します。<code>ty</code> が指定されていない場合は、値は0とみなされます。</p>
<p>各 <a href="/ja/docs/translation-value" title="translation-value"><code>&lt;translation-value&gt;</code></a> 引数は <code><a href="/ja/docs/CSS/length" title="CSS/length">&lt;length&gt;</a></code> 値か <code><a href="/ja/docs/CSS/percentage" title="CSS/percentage">&lt;percentage&gt;</a></code> 値のいずれかです。</p>


<h3 id="translateX" name="translateX">translateX</h3>
<pre>
transform:  translateX(tx)       /* see {{Xref_csslength}} for possible values */</pre>
<p>要素を X 軸にそって指定量だけ移動します。</p>


<h3 id="translateY" name="translateY">translateY</h3>
<pre>
transform:  translateY(ty)       /* see {{Xref_csslength}} for possible values */</pre>
<p>要素を Y 軸にそって指定量だけ移動します。</p>




<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', 'transform')}}</td>
      <td>{{Spec2('CSS3 Transforms')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>




<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
        <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<br />
          {{CompatGeckoDesktop("16.0")}}</td>
        <td>9.0 {{property_prefix("-ms")}}<br />
          10.0</td>
        <td>10.5{{property_prefix("-o")}}<br />
          12.10</td>
        <td>3.1{{property_prefix("-webkit")}}</td>
      </tr>
      <tr>
        <td>3D のサポート</td>
        <td>12.0{{property_prefix("-webkit")}}</td>
        <td>10.0{{property_prefix("-moz")}}<br />
          {{CompatGeckoDesktop("16.0")}}</td>
        <td>10.0</td>
        <td>{{CompatNo}}</td>
        <td>4.0{{property_prefix("-webkit")}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>



<h3 id="Notes" name="Notes">注記</h3>
<p>Internet Explorer 5.5 以降はプロプライエタリな <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> を使って同様の効果を得ることができます。</p>
<p>Gecko 14.0 は <code>skew()</code>の実験的なサポートを取り除きましたが、Gecko 15.0 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。</p>


<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li><a href="/ja/docs/CSS/Using_CSS_transforms" title="CSS/Using_CSS_transforms">CSS Transforms の利用</a></li>
  <li><a href="/ja/docs/translation-value" title="translation-value">&lt;translation-value&gt;</a> データ型</li>
  <li>{{CSS_Reference:Transforms}}</li>
  <li><a href="http://paulirish.com/2010/introducing-css3please/#comment-36380">More info</a> on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.</li>
  <li>クロスブラウザな 2D の <a href="http://plugins.jquery.com/project/jquery-transform">transform plugin for jQuery</a></li>
</ul>
Revert to this revision