diff options
Diffstat (limited to 'files/ja/web/css/transform-function')
20 files changed, 2844 insertions, 0 deletions
diff --git a/files/ja/web/css/transform-function/index.html b/files/ja/web/css/transform-function/index.html new file mode 100644 index 0000000000..192ef4aa4c --- /dev/null +++ b/files/ja/web/css/transform-function/index.html @@ -0,0 +1,293 @@ +--- +title: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Data Type + - Layout + - Reference +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <code><transform-function></code> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、要素の外見の変形を表します。変換<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは {{cssxref("transform")}} プロパティの中で使用されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code><transform-function></code> データ型は、以下に示した変換関数のうちの一つを使用して指定します。各関数は二次元または三次元の座標操作を適用します。</p> + +<h3 id="Matrix_transformation" name="Matrix_transformation">行列変換</h3> + +<dl> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt> + <dd>二次元の同次変換行列を記述します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt> + <dd>三次元の変換を4×4の同次行列で記述します。</dd> +</dl> + +<h3 id="Perspective" name="Perspective">視点距離</h3> + +<dl> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt> + <dd>ユーザーと z=0 平面との間の距離を設定します。</dd> +</dl> + +<h3 id="Rotation" name="Rotation">回転</h3> + +<dl> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt> + <dd>要素を二次元平面上で特定の点を中心に回転します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt> + <dd>要素を三次元空間で特定の軸を中心に回転します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt> + <dd>要素を水平軸を中心に回転します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt> + <dd>要素を垂直軸を中心に回転します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt> + <dd>要素を Z 軸を中心に回転します。</dd> +</dl> + +<h3 id="Scaling_resizing" name="Scaling_resizing">拡大縮小</h3> + +<dl> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/scale">scale()</a></code></dt> + <dd>要素を二次元平面上で拡大または縮小します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></dt> + <dd>要素を三次元空間で拡大または縮小します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt> + <dd>要素を水平に拡大または縮小します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt> + <dd>要素を垂直に拡大または縮小します。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt> + <dd>要素を Z 軸方向に拡大または縮小します。</dd> +</dl> + +<h3 id="Skewing_distortion" name="Skewing_distortion">歪め</h3> + +<dl> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/skew">skew()</a></code></dt> + <dd>要素を二次元平面上で歪ませます。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt> + <dd>要素を水平方向に歪ませます。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt> + <dd>要素を垂直方向に歪ませます。</dd> +</dl> + +<h3 id="Translation_moving" name="Translation_moving">平行移動</h3> + +<dl> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/translate">translate()</a></code></dt> + <dd>要素を二次元平面上で平行移動させます。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt> + <dd>要素を三次元空間で平行移動させます。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt> + <dd>要素を水平方向に平行移動させます。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt> + <dd>要素を垂直方向に平行移動させます。</dd> + <dt><code><a href="/ja/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt> + <dd>要素を Z 軸方向に平行移動させます。</dd> +</dl> + +<h2 id="Description" name="Description">解説</h2> + +<p>HTML 要素の寸法や形状を記述するために様々な座標モデルが用いられることがあり、同様に変換にも適用されます。最も一般的なものは、<a href="https://ja.wikipedia.org/wiki/%E7%9B%B4%E4%BA%A4%E5%BA%A7%E6%A8%99%E7%B3%BB">直交座標系</a>ですが、<a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">同次座標系</a>が用いられることもあります。</p> + +<h3 id="Cartesian_coordinates" name="Cartesian_coordinates">直交座標系</h3> + +<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right;"></a></p> + +<p>直交座標系では、二次元の点は、 X 座標 (横座標) と Y 座標 (縦座標) の二つの値を使用して記述します。これは <code>(x, y)</code> のベクトル表記で表現されます。</p> + +<p>CSS (および多くのコンピューターグラフィック) では、原点 <code>(0, 0)</code> が各要素の<em>左上</em>を表します。正の座標は原点から下および右に向かい、負の座標は上および左に向かいます。従って、右に2単位、下に5単位では <code>(2, 5)</code> となり、左に3単位、上に12単位では <code>(-3, -12)</code> となります。</p> + +<h3 id="Transformation_functions" name="Transformation_functions">変換関数</h3> + +<p>変換関数は、座標の値を操作することによって要素の外見を変更します。線形変換関数は、次のように2×2の行列で記述されます。</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> </math></p> + +<p>関数は行列の乗算によって要素に適用されます。つまり、それぞれの座標は行列の値に基づいて変化します。</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>一行の中に複数の変換を適用することもできます。</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>この記法で、最もよく使われる回転、拡大縮小、傾斜の変換を記述し、合成することができます。 (実際、すべての変換が記述できる線形関数です。) 変換の合成は右から左の順に効果的に適用されます。</p> + +<p>しかし、主要な変換のうち平行移動は線形ではなく、従ってこの記法を使用する場合は特例とする必要があります。平行移動のベクトル <code>(tx, ty)</code> は、二つの追加の引数で別に表現しなければなりません。</p> + +<div class="note"> +<p><strong>注:</strong> 直交座標よりも難解ですが、<a class="external" href="https://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E5%B9%BE%E4%BD%95%E5%AD%A6">射影幾何学</a>の<a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">同次座標</a>は3×3の変換行列を使用するので、線形関数として平行移動をより簡単に表現できます。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Transform_function_comparison" name="Transform_function_comparison">変換関数の比較</h3> + +<p>次の例では、 DOM 要素と変換から作成された 3D 立方体と、立方体を変換するためのさまざまな変換関数を選択できる選択メニューを提供しています。</p> + +<p>1 つを選択すると、立方体に変換が適用されます。 2 秒後に立方体は開始状態に戻ります。立方体の開始状態は、 <code>transform3d()</code> を使用してわずかに回転され、すべての変換の効果を見ることができます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><main> + <section id="example-element"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </section> + + <div class="select-form"> + <label>Select a transform function</label> + <select> + <option selected>Choose a function</option> + <option>rotate(360deg)</option> + <option>rotateX(360deg)</option> + <option>rotateY(360deg)</option> + <option>rotateZ(360deg)</option> + <option>rotate3d(1, 1, 1, 90deg)</option> + <option>scale(1.5)</option> + <option>scaleX(1.5)</option> + <option>scaleY(1.5)</option> + <option>scaleZ(1.5)</option> + <option>scale3d(1, 1.5, 1.5)</option> + <option>skew(17deg, 13deg)</option> + <option>skewX(17deg)</option> + <option>skewY(17deg)</option> + <option>translate(100px, 100px)</option> + <option>translateX(100px)</option> + <option>translateY(100px)</option> + <option>translateZ(100px)</option> + <option>translate3d(50px, 50px, 50px)</option> + <option>perspective(200px)</option> + <option>matrix(1, 2, -1, 1, 80, 80)</option> + <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> + </select> + </div> +</main></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">main { + width: 400px; + height: 200px; + padding: 50px; + background-image: linear-gradient(135deg, white, cyan, white); +} + +#example-element { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: transform 1.5s; + transform: rotate3d(1, 1, 1, 30deg); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90,90,90,.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0,210,0,.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210,0,0,.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0,0,210,.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210,210,0,.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210,0,210,.7); + transform: rotateX(-90deg) translateZ(50px); +} + +.select-form { + margin-top: 50px; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const selectElem = document.querySelector('select'); +const example = document.querySelector('#example-element'); + +selectElem.addEventListener('change', () => { + if(selectElem.value === 'Choose a function') { + return; + } else { + example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`; + setTimeout(function() { + example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; + }, 2000) + } +})</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}}</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('CSS Transforms 2', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>三次元変換関数を追加。</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}</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.types.transform-function")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>CSS の {{cssxref("transform")}} プロパティ</li> +</ul> diff --git a/files/ja/web/css/transform-function/matrix()/index.html b/files/ja/web/css/transform-function/matrix()/index.html new file mode 100644 index 0000000000..02af2d3f7d --- /dev/null +++ b/files/ja/web/css/transform-function/matrix()/index.html @@ -0,0 +1,113 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +tags: + - CSS + - CSS 変換 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/matrix() +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>matrix()</code></strong> 関数は、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>matrix(a, b, c, d, tx, ty)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/matrix3d">matrix3d</a>(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code> の短縮形です。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>matrix()</code> 関数は6つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。</p> + +<div class="note"><strong>メモ:</strong> Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を <var>tx</var> および <var>ty</var> で受け付けていました。</div> + +<pre class="syntaxbox">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><var>a</var> <var>b</var> <var>c</var> <var>d</var></dt> + <dd>{{cssxref("<number>")}} で、線形変換を記述します。</dd> + <dt><var>tx</var> <var>ty</var></dt> + <dd>{{cssxref("<number>")}} で、適用する変換を記述します。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[a b c d tx ty]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="changed">Changed</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.changed { + transform: matrix(1, 2, -1, 1, 80, 80); + background-color: pink; +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 350, 350)}}</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", "#funcdef-transform-matrix", "matrix()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/ja/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li> + <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li> +</ul> diff --git a/files/ja/web/css/transform-function/matrix3d()/index.html b/files/ja/web/css/transform-function/matrix3d()/index.html new file mode 100644 index 0000000000..c34354f047 --- /dev/null +++ b/files/ja/web/css/transform-function/matrix3d()/index.html @@ -0,0 +1,240 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/matrix3d() +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>matrix3d()</code></strong> 関数は、 4x4 の三次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>matrix3d()</code> 関数は16の値で指定します。列優先の順で記述します。</p> + +<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><var>a1</var> <var>b1</var> <var>c1</var> <var>d1</var> <var>a2</var> <var>b2</var> <var>c2</var> <var>d2</var> <var>a3</var> <var>b3</var> <var>c3</var> <var>d3</var></dt> + <dd>{{cssxref("<number>")}} で、線形変換を記述します。</dd> + <dt><var>a4</var> <var>b4</var> <var>c4 d4</var></dt> + <dd>{{cssxref("<number>")}} で、適用する変換を記述します。</dd> +</dl> + +<div class="note"><strong>注:</strong> Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を <var>a4</var>, <var>b4</var>, <var>c4</var> で受け付けていました。</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">この変換は三次元空間に適用され、平面で表現することはできません。</td> + <td colspan="1" rowspan="2">一般的な三次元<a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F">アファイン変換</a>は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。</td> + <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="つぶれる立方体の例">つぶれる立方体の例</h3> + +<p>次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで <code>matrix3d()</code> 変換を適用することができます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><section id="example-element" tabindex="0"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> +</section> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#example-element { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: transform 1.5s; + transform: rotate3d(1, 1, 1, 30deg); + margin: 50px auto; +} + +#example-element:hover, #example-element:focus { + transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90,90,90,.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0,210,0,.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210,0,0,.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0,0,210,.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210,210,0,.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210,0,210,.7); + transform: rotateX(-90deg) translateZ(50px); +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<div>{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}}</div> + +<h3 id="行列変換と拡大縮小の例">行列変換と拡大縮小の例</h3> + +<p>もう一つの <code>transform3d()</code> の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div class="foo"> +Lorem ipsum dolor sit amet, consectetur adipisicing elit. +Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere +necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">html { + width: 100%; +} +body { + height: 100vh; + /* Centering content */ + display: flex; + flex-flow: row wrap; + justify-content: center; + align-content: center; + +} +.foo { + width: 50%; + padding: 1em; + color: white; + background: #ff8c66; + border: 2px dashed black; + text-align: center; + font-family: system-ui, sans-serif; + font-size: 14px; + /* Setting up animation for better demonstration */ + animation: MotionScale 2s alternate linear infinite; +} + +@keyframes MotionScale { + from { + /* + Identity matrix is used as basis here. + The matrix below describes the + following transformations: + Translates every X point by -50px + Translates every Y point by -100px + Translates every Z point by 0 + Scales down by 10% + */ + transform: matrix3d( + 1,0,0,0, + 0,1,0,0, + 0,0,1,0, + -50,-100,0,1.1 + ); + + } + 50% { + transform: matrix3d( + 1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,0.9 + ); + } + to { + transform: matrix3d( + 1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 50,100,0,1.1 + ) + } +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<div>{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}</div> + +<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("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li> +</ul> diff --git a/files/ja/web/css/transform-function/perspective()/index.html b/files/ja/web/css/transform-function/perspective()/index.html new file mode 100644 index 0000000000..ba64284843 --- /dev/null +++ b/files/ja/web/css/transform-function/perspective()/index.html @@ -0,0 +1,158 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +tags: + - CSS + - CSS 変換 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/perspective() +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>perspective()</code></strong> 関数は、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p><code>perspective()</code> 変形関数は、変形される要素に適用される {{cssxref('transform')}} 値の一部です。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に変形される子の親に付けられるのとは異なります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>perspective()</code> を使用してしている視点距離は {{cssxref("<length>")}} 値で指定し、ユーザーと z=0 平面との間の距離を表します。 z=0 平面は二次元で表示されるすべてのものが表示される平面であり、または画面の平面です。正の数を指定すると、要素はインターフェイスの他のものよりもユーザーの近くに表示され、負の数を指定すると、遠くに表示されます。値がより大きくなるほど、ユーザーの視点は遠ざかります。</p> + +<pre class="syntaxbox notranslate">perspective(d) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><var>d</var></dt> + <dd>{{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>この変換は三次元空間に適用され、平面で表現することはできません。</p> + </td> + <td colspan="1" rowspan="2">この変換は ℝ<sup>3</sup> では線形変換ではないので、デカルト座標行列を使用して表現することはできません。</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Without perspective:</p> +<div class="no-perspective-box"> + <div class="face front">A</div> + <div class="face top">B</div> + <div class="face left">C</div> +</div> + +<p>With perspective (9cm):</p> +<div class="perspective-box-far"> + <div class="face front">A</div> + <div class="face top">B</div> + <div class="face left">C</div> +</div> + +<p>With perspective (4cm):</p> +<div class="perspective-box-closer"> + <div class="face front">A</div> + <div class="face top">B</div> + <div class="face left">C</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.face { + position: absolute; + width: 100px; + height: 100px; + line-height: 100px; + font-size: 100px; + text-align: center; +} + +p + div { + width: 100px; + height: 100px; + transform-style: preserve-3d; + margin-left: 100px; +} +.no-perspective-box { + transform: rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-far { + transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-closer { + transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); +} + +.top { + background-color: skyblue; + transform: rotateX(90deg) translate3d(0, 0, 50px); +} + +.left { + background-color: pink; + transform: rotateY(-90deg) translate3d(0, 0, 50px); +} + +.front { + background-color: limegreen; + transform: translate3d(0, 0, 50px); +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Examples', '250', '350') }}</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("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/rotate()/index.html b/files/ja/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..38d18aca73 --- /dev/null +++ b/files/ja/web/css/transform-function/rotate()/index.html @@ -0,0 +1,153 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +tags: + - CSS + - CSS 変換 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotate() +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>rotate()</code></strong> 関数は、要素を二次元平面上の特定の点を中心に、変形させずに回転させます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<p>要素が回転する中心となる特定の点 — 前述 — は、<strong>変形原点</strong>とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>rotate()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180度で回転したものは<em>点対称</em>と呼ばれます。</p> + +<pre class="syntaxbox notranslate">rotate(<var>a</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><var>a</var></dt> + <dd>{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td> + <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate(45deg); /* rotateZ(45deg) と等価 */ + background-color: pink; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Basic_example", "auto", 180)}}</p> + +<h3 id="Combining_rotation_with_another_transformation" name="Combining_rotation_with_another_transformation">回転とその他の変形の組み合わせ</h3> + +<p>複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotate">Rotated</div> +<div class="rotate-translate">Rotated + Translated</div> +<div class="translate-rotate">Translated + Rotated</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + position: absolute; + left: 40px; + top: 40px; + width: 100px; + height: 100px; + background-color: lightgray; +} + +.rotate { + background-color: transparent; + outline: 2px dashed; + transform: rotate(45deg); +} + +.rotate-translate { + background-color: pink; + transform: rotate(45deg) translateX(180px); +} + +.translate-rotate { + background-color: gold; + transform: translateX(180px) rotate(45deg); +} +</pre> + +<h4 id="結果">結果</h4> + +<p>{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}}</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", "#funcdef-transform-rotate", "rotate()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li> +</ul> diff --git a/files/ja/web/css/transform-function/rotate3d()/index.html b/files/ja/web/css/transform-function/rotate3d()/index.html new file mode 100644 index 0000000000..9590e855db --- /dev/null +++ b/files/ja/web/css/transform-function/rotate3d()/index.html @@ -0,0 +1,153 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d() +tags: + - CSS + - CSS Function + - CSS Transforms + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotate3d() +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>rotate3d()</code></strong> 関数は、要素を三次元空間内の固定した軸を中心に、変形させずに回転させます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>3D 空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は [x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが<em>正規化</em>されていない場合 (すなわち、3つの座標の2乗の合計が1ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル [0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。</p> + +<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>rotate3d()</code> で行う回転の量は、3つの {{cssxref("<number>")}} および1つの {{cssxref("<angle>")}} で指定します。 <code><number></code> は回転軸を表すベクトルの X, Y, Z 座標を表します。 <code><angle></code> は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。</p> + +<pre class="syntaxbox">rotate3d(<var>x</var>, <var>y</var>, <var>z</var>, <var>a</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>x</var></code></dt> + <dd>{{cssxref("<number>")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。</dd> + <dt><code><var>y</var></code></dt> + <dd>{{cssxref("<number>")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。</dd> + <dt><code><var>z</var></code></dt> + <dd>{{cssxref("<number>")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。</dd> + <dt><code><var>a</var></code></dt> + <dd>{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd> +</dl> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <td rowspan="2">この変形は三次元空間に適用され、平面で表すことはできません。</td> + </tr> + <tr> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + </tr> + <tr> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> + </tr> + <tr> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Rotating_on_the_y-axis" name="Rotating_on_the_y-axis">Y 軸に沿って回転</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(0, 1, 0, 60deg); + background-color: pink; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}</p> + +<h3 id="Rotating_on_a_custom_axis" name="Rotating_on_a_custom_axis">独自の軸に沿って回転</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(1, 2, -1, 192deg); + background-color: pink; +} +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}</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("CSS Transforms 2", "#funcdef-rotate3d", "rotate3d()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/rotatex()/index.html b/files/ja/web/css/transform-function/rotatex()/index.html new file mode 100644 index 0000000000..e7bfbd1d8c --- /dev/null +++ b/files/ja/web/css/transform-function/rotatex()/index.html @@ -0,0 +1,114 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX() +tags: + - CSS + - CSS Function + - CSS Transforms + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotateX() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>rotateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>rotateX(a)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(1, 0, 0, a)</code> と等価です。</p> +</div> + +<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>rotateX()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p> + +<pre class="syntaxbox">rotateX(<var>a</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>a</var></code></dt> + <dd>{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">この変形は三次元空間に適用され、平面で表すことはできません。</td> + <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateX(45deg); + background-color: pink; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", "auto", 180)}}</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("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/rotatey()/index.html b/files/ja/web/css/transform-function/rotatey()/index.html new file mode 100644 index 0000000000..f6e15b36a3 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatey()/index.html @@ -0,0 +1,114 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY() +tags: + - CSS + - CSS Function + - CSS Transforms + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotateY() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>rotateY()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>rotateY(a)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 1, 0, a)</code> と等価です。</p> +</div> + +<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>rotateY()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p> + +<pre class="syntaxbox notranslate">rotateY(<var>a</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>a</var></code></dt> + <dd>{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">この変形は三次元空間に適用され、平面で表すことはできません。</td> + <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateY(60deg); + background-color: pink; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", "auto", 180)}}</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("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/rotatez()/index.html b/files/ja/web/css/transform-function/rotatez()/index.html new file mode 100644 index 0000000000..aec4b6a9ce --- /dev/null +++ b/files/ja/web/css/transform-function/rotatez()/index.html @@ -0,0 +1,114 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ() +tags: + - CSS + - CSS Function + - CSS Transforms + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotateZ() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>rotateZ()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>rotateZ(a)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate</a>(a)</code> または <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 0, 1, a)</code> と等価です。</p> +</div> + +<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>rotateZ()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p> + +<pre class="syntaxbox">rotateZ(<var>a</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>a</var></code></dt> + <dd>{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">この変形は三次元空間に適用され、平面で表すことはできません。</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateZ(45deg); + background-color: pink; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", "auto", 180)}}</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("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/scale()/index.html b/files/ja/web/css/transform-function/scale()/index.html new file mode 100644 index 0000000000..585964f29b --- /dev/null +++ b/files/ja/web/css/transform-function/scale()/index.html @@ -0,0 +1,158 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale() +tags: + - CSS + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/scale() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>scale()</code></strong> は <a href="/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p> + +<p>この変形は、二次元ベクトルによって特徴づけられます。座標でどれほどの変倍が各方向において行われるのかを定義します。両方の座標が等しい場合、変倍は一様 (つまり等方的) で、要素の形が保たれます (変倍関数は<a href="https://en.wikipedia.org/wiki/Homothetic_transformation"> 相似変換</a> を定義します)。</p> + +<p>座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は <a href="https://ja.wikipedia.org/wiki/点対称">点対称化</a> と大きさの変更を行います。1 と等しい場合、変倍は何もしません。</p> + +<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>scale()</code> 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。</p> + +<pre class="syntaxbox notranslate">scale(<var>sx</var>) + +scale(<var>sx</var>, <var>sy</var>) +</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code><var>sx</var></code></dt> + <dd>変倍ベクトルの横座標を表す {{cssxref("<number>")}}。</dd> + <dt><code><var>sy</var></code></dt> + <dd>変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これのデフォルト値は <code><var>sx</var></code> であり、要素の形を保つ一様な変倍となります。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> 上のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> 上の同次座標</th> + <th scope="col">ℝ<sup>3</sup> 上のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> 上の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[sx 0 0 sy 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Scaling_the_X_and_Y_dimensions_together" name="Scaling_the_X_and_Y_dimensions_together">X と Y の大きさを一緒に変倍する</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="scaled">Scaled</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ + background-color: pink; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}</p> + +<h3 id="Scaling_X_and_Y_dimensions_separately_and_translating_the_origin" name="Scaling_X_and_Y_dimensions_separately_and_translating_the_origin">X と Y の大きさを別々に変倍し、原点を平行移動させる</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="scaled">Scaled</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ + transform-origin: left; + background-color: pink; +} +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。</p> + +<p>また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。</p> + +<p>詳しくは以下の文書を参照してください。</p> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN WCAG の理解、ガイドライン 2.3 の解説</a></li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li> +</ul> + +<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", "#funcdef-transform-scale", "scale()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>互換性の情報は <code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li>{{cssxref("transform-function/scale3d", "scale3d()")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/scalex()/index.html b/files/ja/web/css/transform-function/scalex()/index.html new file mode 100644 index 0000000000..72dbcfc046 --- /dev/null +++ b/files/ja/web/css/transform-function/scalex()/index.html @@ -0,0 +1,116 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX() +translation_of: Web/CSS/transform-function/scaleX() +--- +<div>{{CSSRef}}</div> + +<div><a href="https://developer.mozilla.org/ja/docs/Web/CSS">CSS</a>の<strong><code>scaleX()</code></strong> 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。</div> + +<div>結果は <a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-function" title="CSS の <transform-function> データ型は、要素の外見の変形を表します。変形関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。"><code><transform-function></code></a> データ型になります。</div> + +<div></div> + +<div></div> + +<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p> + +<p>係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 <code>scaleX(-1)</code> は<a href="http://en.wikipedia.org/wiki/Axial_symmetry" rel="noopener">軸の線対称</a>を定義し、垂直軸は原点を通過します (<a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin" title="CSS の transform-origin プロパティは、要素の変形 (transform) における原点を設定します。"><code>transform-origin</code></a> プロパティで指定)。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>scaleX(sx)</code>は<code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4;"> </span></font></code><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code>または<code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d</a>(sx, 1, 1)</code>と等価です。</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">scaleX(<em>s</em>) +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>s</code></dt> + <dd>Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[s 0 0 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="scaled">Scaled</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleX(0.6); + background-color: pink; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples","200","200")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li>{{cssxref("transform-origin")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/scaley()/index.html b/files/ja/web/css/transform-function/scaley()/index.html new file mode 100644 index 0000000000..213942b13c --- /dev/null +++ b/files/ja/web/css/transform-function/scaley()/index.html @@ -0,0 +1,93 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY() +tags: + - CSS + - CSS 変形 + - CSS 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scaleY() +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scaleY()</code></strong> 関数は、要素を Y 軸に沿って (垂直に) 拡縮する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p> + +<p>係数が 1 である場合を除いて、各要素点の縦座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 <code>scaleY(-1)</code> は<a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">軸の線対称</a>を定義し、水平軸は原点を通過します ({{cssxref("transform-origin")}} プロパティで指定)。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>scaleY(sy)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/scale">scale</a>(1, sy)</code> または <code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d</a>(1, sy, 1)</code> と等価です。</p> + +<p><code>transform: rotateX(180deg);</code> === <code>transform: scaleY(-1);</code></p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">scaleY(s) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>s</code></dt> + <dd>{{cssxref("<number>")}} で、要素のそれぞれの点を規則的に適用する拡大縮小係数を表します。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 s 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="scaled">Scaled</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleY(0.6); + background-color: pink; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Examples", 200, 200)}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/skew()/index.html b/files/ja/web/css/transform-function/skew()/index.html new file mode 100644 index 0000000000..f99a4a1ea0 --- /dev/null +++ b/files/ja/web/css/transform-function/skew()/index.html @@ -0,0 +1,154 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/skew() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>skew()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。</p> + +<p>それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>skew()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。1つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。</p> + +<pre class="syntaxbox notranslate">skew(<var>ax</var>) + +skew(<var>ax</var>, <var>ay</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>ax</var></code></dt> + <dd>{{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。</dd> + <dt><code><var>ay</var></code></dt> + <dd>{{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は <code>0</code> となり、水平方向にのみゆがめます。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Skewing_on_the_x-axis_only" name="Skewing_on_the_x-axis_only">X 軸のみの変形</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="skewed">Skewed</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg); /* Equal to skewX(10deg) */ + background-color: pink; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}}</p> + +<h3 id="Skewing_on_both_axes" name="Skewing_on_both_axes">両方の軸の変形</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="skewed">Skewed</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg, 10deg); + background-color: pink; +} +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}}</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", "#funcdef-transform-skew", "skew()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><a href="/ja/docs/Web/CSS/transform-function/skewX">skewX()</a></li> + <li><a href="/ja/docs/Web/CSS/transform-function/skewY">skewY()</a></li> +</ul> diff --git a/files/ja/web/css/transform-function/skewx()/index.html b/files/ja/web/css/transform-function/skewx()/index.html new file mode 100644 index 0000000000..d84043f6ef --- /dev/null +++ b/files/ja/web/css/transform-function/skewx()/index.html @@ -0,0 +1,113 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/skewX() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>skewX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p> + +<div class="note"> +<p><strong>注:</strong> <code>skewX(a)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/skew">skew</a>(a)</code> と等価です。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">skewX(<var>a</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>a</var></code></dt> + <dd>{{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(a)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>tan(a)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(a)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 tan(a) 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="skewed">Skewed</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewX(10deg); /* Equal to skew(10deg) */ + background-color: pink; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 200, 200)}}</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", "#funcdef-transform-skewx", "skewX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/skewy()/index.html b/files/ja/web/css/transform-function/skewy()/index.html new file mode 100644 index 0000000000..8d19654b1d --- /dev/null +++ b/files/ja/web/css/transform-function/skewy()/index.html @@ -0,0 +1,109 @@ +--- +title: skewY() +slug: Web/CSS/transform-function/skewY() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/skewY() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>skewY()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">skewY(<var>a</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>a</var></code></dt> + <dd>{{cssxref("<angle>")}} で、縦座標方向にゆがめるのに使用する角度を表します。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(a)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(a)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(a)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(a)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 tan(a) 0 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="skewed">Skewed</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewY(40deg); + background-color: pink; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 200, 200)}}</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", "#funcdef-transform-skewy", "skewY()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/translate()/index.html b/files/ja/web/css/transform-function/translate()/index.html new file mode 100644 index 0000000000..a2c8c98f51 --- /dev/null +++ b/files/ja/web/css/transform-function/translate()/index.html @@ -0,0 +1,153 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translate() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>translate()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>は、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p> + +<p>この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が動くかの座標を定義します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css notranslate">/* 単一の <length-percentage> 値 */ +transform: translate(200px); +transform: translate(50%); + +/* 二つの <length-percentage> 値 */ +transform: translate(100px, 200px); +transform: translate(100px, 50%); +transform: translate(30%, 200px); +transform: translate(30%, 50%); +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt>単一の <code><length-percentage></code> values</dt> + <dd>この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は <code>0</code> に設定されます。例えば、 <code>translate(2)</code> は <code>translate(2, 0)</code> と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。</dd> + <dt>二つの <code><length-percentage></code> 値</dt> + <dd>この値は2つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2つ目にパーセント値が使用された場合は、高さからの相対値です。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 tx ty]</code></td> + </tr> + </tbody> +</table> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox notranslate">translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}<a href="/en-US/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>) +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_a_single-axis_translation" name="Using_a_single-axis_translation">単一軸を使用した変形</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */ + background-color: pink; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p> + +<h3 id="Combining_y-axis_and_x-axis_translation" name="Combining_y-axis_and_x-axis_translation">Y 軸と X 軸の変換の組み合わせ</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</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', '#funcdef-transform-translate', 'translate()')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/translate3d()/index.html b/files/ja/web/css/transform-function/translate3d()/index.html new file mode 100644 index 0000000000..2096870fb1 --- /dev/null +++ b/files/ja/web/css/transform-function/translate3d()/index.html @@ -0,0 +1,141 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translate3d() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>translate3d()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を 3D 空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">translate3d(<var>tx</var>, <var>ty</var>, <var>tz</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>tx</var></code></dt> + <dd>変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。</dd> + <dt><code><var>ty</var></code></dt> + <dd>変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。</dd> + <dt><code><var>tz</var></code></dt> + <dd>変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む変換は無効とされます。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p> + </td> + <td colspan="1" rowspan="2">ℝ<sup>3</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_a_single_axis_translation" name="Using_a_single_axis_translation">単一軸を使用した変換</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + /* Equivalent to perspective(500px) translateX(10px) */ + transform: perspective(500px) translate3d(10px, 0, 0px); + background-color: pink; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}</p> + +<h3 id="Combining_z-axis_and_x-axis_translation" name="Combining_z-axis_and_x-axis_translation">z 軸と x 軸を組み合わせた変換</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translate3d(10px, 0, 100px); + background-color: pink; +} +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}</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("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/translatex/index.html b/files/ja/web/css/transform-function/translatex/index.html new file mode 100644 index 0000000000..e709d708d2 --- /dev/null +++ b/files/ja/web/css/transform-function/translatex/index.html @@ -0,0 +1,119 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translateX +--- +<div>{{CSSRef}}</div> + +<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p> + +<div class="note"> +<p><strong>注:</strong> <code>translateX(tx)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css notranslate">/* <length-percentage> values */ +transform: translateX(200px); +transform: translateX(50%); +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 t 0]</code></td> + </tr> + </tbody> +</table> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox notranslate">translateX({{cssxref("<length-percentage>")}}) +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* translate(10px) と等価 */ + background-color: pink; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</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", "#funcdef-transform-translatex", "translateX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/translatey()/index.html b/files/ja/web/css/transform-function/translatey()/index.html new file mode 100644 index 0000000000..e0fd47a7bb --- /dev/null +++ b/files/ja/web/css/transform-function/translatey()/index.html @@ -0,0 +1,114 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translateY() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p> + +<div class="note"> +<p><strong>注:</strong> <code>translateX(tx)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css notranslate">/* <length-percentage> values */ +transform: translateX(200px); +transform: translateX(50%); +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 t 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* translate(10px) と等価 */ + background-color: pink; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</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", "#funcdef-transform-translatex", "translateX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ja/web/css/transform-function/translatez()/index.html b/files/ja/web/css/transform-function/translatez()/index.html new file mode 100644 index 0000000000..75367b6518 --- /dev/null +++ b/files/ja/web/css/transform-function/translatez()/index.html @@ -0,0 +1,122 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ() +tags: + - 3D + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translateZ() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>translateZ()</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>は、3 次元空間の z 軸に沿って、すなわちビューアーに近づくまたは遠ざかって、要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。</p> + +<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。</p> + +<p>上記のデモでは、 <code><a href="/ja/docs/Web/CSS/perspective">perspective: 550px;</a></code> (3D空間を作成するため) と <code><a href="/ja/docs/Web/CSS/transform-style">transform-style. preserve-3d;</a></code> (従って、子つまり立方体の6辺も3D空間に配置されています) が、立方体に設定されています。</p> + +<div class="note"> +<p><strong>注:</strong> <code>translateZ(tz)</code> は、<code><a href="/ja/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, 0, tz)</code> と等価です。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">translateZ(<var>tz</var>) +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>tz</var></code></dt> + <dd>変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素がビューアーに向かって移動し、負の値で移動すると遠ざかります。</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>2</sup> の同次座標</th> + <th scope="col">ℝ<sup>3</sup> のデカルト座標</th> + <th scope="col">ℝℙ<sup>3</sup> の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">この変換は 3 次元空間に適用されます。平面上では表現できません。</td> + <td colspan="1" rowspan="2">この変換は ℝ<sup>3</sup> の線形変換ではなく、デカルト座標系の行列では表現できません。</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、2 つのボックスが作成されます。 1 つは通常変換されずにページ上に配置されます。 2 番目の方法は、3D 空間を作成するためのパースペクティブを適用して変更し、ユーザーに向かって移動します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translateZ(200px); + background-color: pink; +} +</pre> + +<p>本当にここで重要なのは、class "moved" です。それが何をするかを見てみましょう。 まず、<code><a href="/ja/docs/Web/CSS/transform-function/perspective">perspective()</a></code> 関数は、ビューアーを、z=0 (本質的にスクリーンの表面) にある平面に対してビューアーを配置します。<code>500px</code> の値は、ユーザーが z=0 にある画像の「正面」に 500 ピクセルあることを意味します。</p> + +<p>次に、<code>translateZ()</code> 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、2D ディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の 3D ディスプレイデバイスを使用して見たときに要素をより近く見せるという効果があります。</p> + +<p>なお、 <code>perspective()</code> の値が <code>translateZ()</code> の値よりも小さい場合、例えば <code>transform: perspective(200px) translateZ(300px);</code> の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。</p> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</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('CSS Transforms 2', '#transform-functions', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>3D 変換関数を CSS Transforms 標準に追加。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> |