mozilla

Revision 70475 of transform

  • リビジョンの URL スラグ: CSS/-moz-transform
  • リビジョンのタイトル: -moz-transform
  • リビジョンの ID: 70475
  • 作成日:
  • 作成者: Yukoba
  • 現行リビジョン いいえ
  • コメント 9 words added, 3 words removed

このリビジョンの内容

{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.1") }}

Summary

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

  • {{ Xref_cssinitial() }}: none
  • Applies to: すべてのブロックレベルとインラインレベルの要素
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}:

Syntax

 -moz-transform:  <transform-function> [<transform-function>]* | none

Values

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

Using CSS transforms を参照。

実働例

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

    -moz-transform: translate(100px) rotate(40deg);
    -moz-transform-origin: 60% 100%;

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

CSS transform functions

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

matrix(行列)

-moz-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] と同じです。

Note:  Gecko (Firefox) は txty として {{ Xref_csslength() }} 値を受け付けます。Safari (WebKit) は現在、 txty として単位の無い {{ Xref_cssnumber() }} をサポートします。

実働例

 background: gold;  width: 30em;

    -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
 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);

参照

rotate(回転)

-moz-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(スケーリング)

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

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

scaleX

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

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

scaleY

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

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

skew(傾斜)

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

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

skewX

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

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

skewY

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

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

translate(移動)

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

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

translateX

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

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

translateY

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

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

ブラウザ互換性

ブラウザ Lowest version  Support of
Internet Explorer 9.0 -ms-transform
5.5 Microsoft's Matrix Filter
Firefox (Gecko) 3.5 (1.9.1) -moz-transform
Opera 10.5 -o-transform
Safari (WebKit) 3.1 (525) -webkit-transform

仕様書

参照

{{ cssxref("-moz-transform-origin") }}, Using CSS transforms

{{ languages( { "en": "en/CSS/transform","fr":"fr/CSS/transform" } ) }}

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

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.1") }}</p>
<h2 id="Summary">Summary</h2>
<p><code>-moz-transform </code>CSS プロパティは CSS 視覚フォーマットモデルの座標空間を変更できるようにします。これを用いると、要素を移動、回転、スケーリング、傾斜させることができます。</p>
<ul> <li>{{ Xref_cssinitial() }}: none</li> <li>Applies to: すべてのブロックレベルとインラインレベルの要素</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}:</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre> -moz-transform:  &lt;transform-function&gt; [&lt;transform-function&gt;]* | none
</pre>
<h2 id="Values">Values</h2>
<dl> <dt>transform-function</dt> <dd>1個以上の {{ anch("CSS transform functions") }}。下記参照。</dd> <dt>none</dt> <dd>transform は何も適用されないことを示す。</dd>
</dl>
<h2 id=".E4.BE.8B">例</h2>
<p><a class="internal" href="/Ja/CSS/Using_CSS_transforms" title="ja/CSS/Using CSS transforms">Using CSS transforms</a> を参照。</p>
<h4 id=".E5.AE.9F.E5.83.8D.E4.BE.8B">実働例</h4>
<pre style="width:33em; border:solid red; -moz-transform:translate(100px) rotate(40deg); -moz-transform-origin:60% 100%; -webkit-transform:translate(100px) rotate(45deg); -webkit-transform-origin:60% 100%;">pre {
     width: 33em;
     border: solid red;

    -moz-transform: translate(100px) rotate(40deg);
    -moz-transform-origin: 60% 100%;

    -webkit-transform: translate(100px) rotate(40deg);
    -webkit-transform-origin: 60% 100%;
}
</pre>
<h2 id="CSS_transform_functions">CSS transform functions</h2>
<p><code>-moz-transform </code>CSS プロパティは要素で使用される座標システムを <strong>transform functions</strong> を用いて操作できるようにします。これらの function は以下に記述されています。</p>
<h3 id="matrix.EF.BC.88.E8.A1.8C.E5.88.97.EF.BC.89">matrix(行列)</h3>
<pre>-moz-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>Note:</strong>  Gecko (Firefox) は <strong>tx</strong> と <strong>ty</strong> として {{ Xref_csslength() }} 値を受け付けます。Safari (WebKit) は現在、 <strong>tx</strong> と <strong>ty</strong> として単位の無い {{ Xref_cssnumber() }} をサポートします。</div>
<h4 id=".E5.AE.9F.E5.83.8D.E4.BE.8B">実働例</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)"> background: gold;  width: 30em;

    -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-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);"> 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);
</pre>
<h4 id=".E5.8F.82.E7.85.A7">参照</h4>
<ul> <li><a class="external" 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 class="external" 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 class="external" href="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Microsoft's matrix filter</a> MSDN</li>
</ul>
<h3 id="rotate.EF.BC.88.E5.9B.9E.E8.BB.A2.EF.BC.89">rotate(回転)</h3>
<pre class="eval">-moz-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.EF.BC.88.E3.82.B9.E3.82.B1.E3.83.BC.E3.83.AA.E3.83.B3.E3.82.B0.EF.BC.89">scale(スケーリング)</h3>
<pre class="eval">-moz-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">scaleX</h3>
<pre class="eval">-moz-transform:  scaleX(sx);          /* a unitless {{ Xref_cssnumber() }}, e.g.  scaleX(2.7) */</pre>
<p>vector <strong>[sx, 1]</strong> を用いたスケーリングを指定します。</p>
<h3 id="scaleY">scaleY</h3>
<pre class="eval">-moz-transform:  scaleY(sy)           /* a unitless {{ Xref_cssnumber() }}, e.g.  scaleY(0.3) */</pre>
<p>vector <strong>[1, sy]</strong> を用いたスケーリングを指定します。</p>
<h3 id="skew.EF.BC.88.E5.82.BE.E6.96.9C.EF.BC.89">skew(傾斜)</h3>
<pre class="eval">-moz-transform:  skew(ax[, ay])       /* one or two {{ Xref_cssangle() }}, e.g.  skew(30deg,-10deg) */</pre>
<p>要素を X 軸または Y 軸に対して指定された角度だけ傾斜させます。<code>ay</code> が指定されていない場合は、Y 軸に対しては傾斜は適用されません。</p>
<h3 id="skewX">skewX</h3>
<pre class="eval">-moz-transform:  skewX(angle)         /* an {{ Xref_cssangle() }}, e.g.  skewX(-30deg) */</pre>
<p>要素を X 軸に対して指定された <code>angle</code> だけ傾斜させます。</p>
<h3 id="skewY">skewY</h3>
<pre class="eval">-moz-transform:  skewY(angle)         /* an {{ Xref_cssangle() }}, e.g.  skewY(4deg) */</pre>
<p>要素を Y 軸に対して指定された <code>angle</code> だけ傾斜させます。</p>
<h3 id="translate.EF.BC.88.E7.A7.BB.E5.8B.95.EF.BC.89">translate(移動)</h3>
<pre class="eval">-moz-transform:  translate(tx[, ty])  /* one or two {{ Xref_csslength() }} values */</pre>
<p>vector <strong>[tx, ty]</strong> による 2D 移動を指定します。<code>ty</code> が指定されていない場合は、値は0とみなされます。</p>
<h3 id="translateX">translateX</h3>
<pre class="eval">-moz-transform:  translateX(tx)       /* see {{ Xref_csslength() }} for possible values */</pre>
<p>要素を X 軸にそって指定量だけ移動します。</p>
<h3 id="translateY">translateY</h3>
<pre class="eval">-moz-transform:  translateY(ty)       /* see {{ Xref_csslength() }} for possible values */</pre>
<p>要素を Y 軸にそって指定量だけ移動します。</p>
<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E4.BA.92.E6.8F.9B.E6.80.A7">ブラウザ互換性</h2>
<table class="standard-table"> <tbody> <tr> <th>ブラウザ</th> <th>Lowest version</th> <th> Support of</th> </tr> <tr> <td rowspan="2">Internet Explorer</td> <td>9.0</td> <td>-ms-transform</td> </tr> <tr> <td>5.5</td> <td>Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Matrix Filter</a></td> </tr> <tr> <td>Firefox (Gecko)</td> <td>3.5 (1.9.1)</td> <td><code>-moz-transform</code></td> </tr> <tr> <td>Opera</td> <td>10.5</td> <td>-o-transform</td> </tr> <tr> <td>Safari (WebKit)</td> <td>3.1 (525)</td> <td><code>-webkit-transform</code></td> </tr> </tbody>
</table>
<h2 id=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-2d-transforms/" title="http://www.w3.org/TR/css3-2d-transforms/">CSS3 2D Transforms</a> Working draft</li>
</ul>
<h2 id=".E5.8F.82.E7.85.A7">参照</h2>
<p>{{ cssxref("-moz-transform-origin") }}, <a class="internal" href="/en/CSS/Using_CSS_transforms" rel="internal" title="/en/CSS/Using CSS transforms">Using CSS transforms</a></p>
<p>{{ languages( { "en": "en/CSS/transform","fr":"fr/CSS/transform" } ) }}</p>
このリビジョンへ戻す