diff options
Diffstat (limited to 'files/ja/web/css/transform-function')
22 files changed, 2945 insertions, 1492 deletions
diff --git a/files/ja/web/css/transform-function/index.md b/files/ja/web/css/transform-function/index.md index 39c5e0ed70..1c3e4cbdc7 100644 --- a/files/ja/web/css/transform-function/index.md +++ b/files/ja/web/css/transform-function/index.md @@ -93,7 +93,7 @@ CSS (および多くのコンピューターグラフィック) では、原点 ### 座標変換関数 -座標変換関数は、座標の値を操作することによって要素の外見を変更します。線形座標変換関数は、次のように 2×2の 行列で記述されます。 +座標変換関数は、座標の値を操作することによって要素の外見を変更します。線形座標変換関数は、次のように 2×2 の行列で記述されます。 <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> @@ -113,9 +113,9 @@ CSS (および多くのコンピューターグラフィック) では、原点 ## 例 -<h3 id="Transform_function_comparison">変換関数の比較</h3> +<h3 id="Transform_function_comparison">座標変換関数の比較</h3> -次の例では、DOM 要素と座標変換で作成された 3D 立方体と、立方体を座標変換するための異なる座標変換関数を選択するための選択メニューが用意されており、異なる種類の効果を比較することができます。 +次の例では、DOM 要素と座標変換で作成された 3D 立方体と、立方体を座標変換するための様々な座標変換関数を選択するための選択メニューが用意されており、様々な種類の効果を比較することができます。 選択すると、変換が立方体に適用され、2 秒後に立方体は開始時の状態に戻ります。すべての変換の効果を見ることができるように、`transform3d()` を使って立方体の開始状態をわずかに回転させています。 diff --git a/files/ja/web/css/transform-function/matrix()/index.md b/files/ja/web/css/transform-function/matrix()/index.md index 02af2d3f7d..a522b300fd 100644 --- a/files/ja/web/css/transform-function/matrix()/index.md +++ b/files/ja/web/css/transform-function/matrix()/index.md @@ -3,69 +3,138 @@ title: matrix() slug: Web/CSS/transform-function/matrix() tags: - CSS - - CSS 変換 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.matrix translation_of: Web/CSS/transform-function/matrix() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>matrix()</code></strong> 関数は、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<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> +> **Note:** `matrix(a, b, c, d, tx, ty)` は `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` の短縮形です。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>matrix()</code> 関数は6つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。</p> +`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 -<div class="note"><strong>メモ:</strong> Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を <var>tx</var> および <var>ty</var> で受け付けていました。</div> +```css +matrix(a, b, c, d, tx, ty) +``` -<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> +- _a_ _b_ _c_ _d_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _tx_ _ty_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <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 + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>a</mi> </mtd><mtd><mi>c</mi> </mtd + ><mtd><mi>tx</mi> </mtd></mtr + ><mtr + ><mtd><mi>b</mi> </mtd><mtd><mi>d</mi> </mtd + ><mtd><mi>ty</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>a</mi> </mtd><mtd><mi>c</mi> </mtd + ><mtd><mi>tx</mi> </mtd></mtr + ><mtr + ><mtd><mi>b</mi> </mtd><mtd><mi>d</mi> </mtd + ><mtd><mi>ty</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>a</mi> </mtd><mtd><mi>c</mi> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mi>tx</mi> </mtd></mtr + ><mtr + ><mtd><mi>b</mi> </mtd><mtd><mi>d</mi> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mi>ty</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +値は次の関数を表します。 +`matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )` + +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div>Normal</div> -<div class="changed">Changed</div></pre> +```html +<div>Normal</div> +<div class="changed">Changed</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -74,40 +143,24 @@ translation_of: Web/CSS/transform-function/matrix() .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> +{{EmbedLiveSample("Examples", 350, 350)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<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> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`matrix3d()`](/ja/docs/Web/CSS/transform-function/matrix3d()) +- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/matrix3d()/index.md b/files/ja/web/css/transform-function/matrix3d()/index.md index c34354f047..f441acebd2 100644 --- a/files/ja/web/css/transform-function/matrix3d()/index.md +++ b/files/ja/web/css/transform-function/matrix3d()/index.md @@ -3,72 +3,99 @@ title: matrix3d() slug: Web/CSS/transform-function/matrix3d() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.matrix3d translation_of: Web/CSS/transform-function/matrix3d() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>matrix3d()</code></strong> 関数は、 4x4 の三次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 +結果は {{cssxref("<transform-function>")}} データ型になります。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>matrix3d()</code> 関数は16の値で指定します。列優先の順で記述します。</p> +`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 -<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> +```css +matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) +``` -<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> +- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ + _a3_ _b3_ _c3_ _d3_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _a4_ _b4_ _c4 d4_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"> + この変換は三次元空間に適用され、平面で表現することはできません。 + </td> + <td> + 一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>a1</mi> </mtd><mtd><mi>a2</mi> </mtd + ><mtd><mi>a3</mi> </mtd><mtd><mi>a4</mi> </mtd></mtr + ><mtr + ><mtd><mi>b1</mi> </mtd><mtd><mi>b2</mi> </mtd + ><mtd><mi>b3</mi> </mtd><mtd><mi>b4</mi> </mtd></mtr + ><mtr + ><mtd><mi>c1</mi> </mtd><mtd><mi>c2</mi> </mtd + ><mtd><mi>c3</mi> </mtd><mtd><mi>c4</mi> </mtd></mtr + ><mtr + ><mtd><mi>d1</mi> </mtd><mtd><mi>d2</mi> </mtd + ><mtd><mi>d3</mi> </mtd><mtd><mi>d4</mi></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="つぶれる立方体の例">つぶれる立方体の例</h3> +### つぶれる立方体の例 -<p>次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで <code>matrix3d()</code> 変換を適用することができます。</p> +次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。 -<h4 id="HTML">HTML</h4> +#### HTML -<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> +```html +<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> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">#example-element { +```css +#example-element { width: 100px; height: 100px; transform-style: preserve-3d; @@ -121,28 +148,31 @@ translation_of: Web/CSS/transform-function/matrix3d() .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> +{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} -<h3 id="行列変換と拡大縮小の例">行列変換と拡大縮小の例</h3> +### 行列変換と拡大縮小の例 -<p>もう一つの <code>transform3d()</code> の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。</p> +もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="foo"> +```html +<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> +</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">html { +```css +html { width: 100%; } body { @@ -202,39 +232,23 @@ body { 50,100,0,1.1 ) } -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<div>{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}</div> +{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} -<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> +{{Specifications}} -<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> +{{Compat}} -<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> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/perspective()/index.md b/files/ja/web/css/transform-function/perspective()/index.md index ba64284843..3be9e8d15f 100644 --- a/files/ja/web/css/transform-function/perspective()/index.md +++ b/files/ja/web/css/transform-function/perspective()/index.md @@ -3,84 +3,116 @@ title: perspective() slug: Web/CSS/transform-function/perspective() tags: - CSS - - CSS 変換 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.perspective translation_of: Web/CSS/transform-function/perspective() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>perspective()</code></strong> 関数は、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`perspective()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-perspective.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +`perspective()` 座標変換関数は {{cssxref('transform')}} 値の一部で、変形される要素に適用されます。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。 -<p><code>perspective()</code> 変形関数は、変形される要素に適用される {{cssxref('transform')}} 値の一部です。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に変形される子の親に付けられるのとは異なります。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`perspective()` で使用する視点距離は、{{cssxref("<length>")}} 値でユーザーと z=0 平面との間の距離を指定するか、または `none` で指定します。 +z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。 +負の値は構文エラーになります。 +`1px` より小さい値 (ゼロを含む) は `1px` になります。 +値が `none` 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。 +z 位置が `perspective` の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。 +`perspective()` が大きいと、変形が小さいことを表します。`perspective()` の値が小さいと、変形が大きいことを表します。`perspective(none)` は無限の距離からの遠近感を表し、変形はありません。 -<p><code>perspective()</code> を使用してしている視点距離は {{cssxref("<length>")}} 値で指定し、ユーザーと z=0 平面との間の距離を表します。 z=0 平面は二次元で表示されるすべてのものが表示される平面であり、または画面の平面です。正の数を指定すると、要素はインターフェイスの他のものよりもユーザーの近くに表示され、負の数を指定すると、遠くに表示されます。値がより大きくなるほど、ユーザーの視点は遠ざかります。</p> +```css +perspective(d) +``` -<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> +- _d_ + - : {{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + この変換は三次元空間に適用され、平面で表現することはできません。 + </td> + <td colspan="1" rowspan="2">この変換は ℝ^3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。</td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd + ><mo>−</mo> + <mn>1</mn> + <mo>/</mo> + <mi>d</mi> </mtd + ><mtd><mn>1</mn></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 { +<h2 id="Examples">例</h2> + +### HTML + +```html +<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> +``` + +### CSS + +```css +.face { position: absolute; width: 100px; height: 100px; @@ -121,38 +153,21 @@ p + div { background-color: limegreen; transform: translate3d(0, 0, 50px); } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{ EmbedLiveSample('Examples', '250', '350') }}</p> +{{ EmbedLiveSample('Examples', '250', '350') }} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotate()/index.md b/files/ja/web/css/transform-function/rotate()/index.md index 38d18aca73..680dadc756 100644 --- a/files/ja/web/css/transform-function/rotate()/index.md +++ b/files/ja/web/css/transform-function/rotate()/index.md @@ -3,65 +3,214 @@ title: rotate() slug: Web/CSS/transform-function/rotate() tags: - CSS - - CSS 変換 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.rotate translation_of: Web/CSS/transform-function/rotate() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>rotate()</code></strong> 関数は、要素を二次元平面上の特定の点を中心に、変形させずに回転させます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<p>要素が回転する中心となる特定の点 — 前述 — は、<strong>変形原点</strong>とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。</p> +要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>rotate()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180度で回転したものは<em>点対称</em>と呼ばれます。</p> +`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 -<pre class="syntaxbox notranslate">rotate(<var>a</var>) -</pre> +```css +rotate(a) +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><var>a</var></dt> - <dd>{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd> -</dl> +- _a_ + - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 + 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + </mtd></mtr + ><mtr + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo></mtd + ></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +<h3 id="Basic_example">基本的な例</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="rotated">Rotated</div></pre> +```html +<div>Normal</div> +<div class="rotated">Rotated</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -71,27 +220,29 @@ translation_of: Web/CSS/transform-function/rotate() transform: rotate(45deg); /* rotateZ(45deg) と等価 */ background-color: pink; } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Basic_example", "auto", 180)}}</p> +{{EmbedLiveSample("Basic_example", "auto", 180)}} -<h3 id="Combining_rotation_with_another_transformation" name="Combining_rotation_with_another_transformation">回転とその他の変形の組み合わせ</h3> +<h3 id="Combining_rotation_with_another_transformation">回転とその他の変形の組み合わせ</h3> -<p>複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。</p> +複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 -<h4 id="HTML_2">HTML</h4> +#### HTML -<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> +```html +<div>Normal</div> +<div class="rotate">Rotated</div> +<div class="rotate-translate">Rotated + Translated</div> +<div class="translate-rotate">Translated + Rotated</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { position: absolute; left: 40px; top: 40px; @@ -115,39 +266,22 @@ translation_of: Web/CSS/transform-function/rotate() background-color: gold; transform: translateX(180px) rotate(45deg); } -</pre> +``` -<h4 id="結果">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}}</p> +{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<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> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/rotate3d()/index.md b/files/ja/web/css/transform-function/rotate3d()/index.md index 9590e855db..fd781800d0 100644 --- a/files/ja/web/css/transform-function/rotate3d()/index.md +++ b/files/ja/web/css/transform-function/rotate3d()/index.md @@ -3,77 +3,264 @@ title: rotate3d() slug: Web/CSS/transform-function/rotate3d() tags: - CSS - - CSS Function - - CSS Transforms - - CSS 変形 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.rotate3d translation_of: Web/CSS/transform-function/rotate3d() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>rotate3d()</code></strong> 関数は、要素を三次元空間内の固定した軸を中心に、変形させずに回転させます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`rotate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)は、要素を三次元空間内の固定した軸を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div> +{{EmbedInteractiveExample("pages/css/rotate3d.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +三次元空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが*正規化*されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル \[0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。 -<p>3D 空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は [x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが<em>正規化</em>されていない場合 (すなわち、3つの座標の2乗の合計が1ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル [0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。</p> +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 -<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`rotate3d()` で行う回転の量は、3 つの {{cssxref("<number>")}} および 1 つの {{cssxref("<angle>")}} で指定します。 `<number>` は回転軸を表すベクトルの X, Y, Z 座標を表します。 `<angle>` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。 -<p><code>rotate3d()</code> で行う回転の量は、3つの {{cssxref("<number>")}} および1つの {{cssxref("<angle>")}} で指定します。 <code><number></code> は回転軸を表すベクトルの X, Y, Z 座標を表します。 <code><angle></code> は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。</p> +```css +rotate3d(x, y, z, a) +``` -<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> +- `x` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。 +- `y` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。 +- `z` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。 +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 <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> + <tbody> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <td rowspan="2"> + この変形は三次元空間に適用され、平面で表すことはできません。 + </td> + </tr> + <tr> + <th scope="col">ℝℙ^2 の同次座標</th> + </tr> + <tr> + <th scope="col">ℝ^3 のデカルト座標</th> + <td> + <a + href="/en-US/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_cart.png" + ><img src="transform-functions-rotate3d_cart.png" /></a + ><math> + <mfenced + ><mtable + ><mtr + ><mtd + ><mn>1</mn> + <mo>+</mo> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> + <mo>(</mo> + <msup + ><mi>x</mi> + <mn>2</mn> </msup + ><mo>-</mo> + <mn>1</mn> + <mo>)</mo> </mtd + ><mtd + ><mi>z</mi> + <mo>·</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>+</mo> + <mi>x</mi> + <mi>y</mi> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mi>y</mi> + <mo>·</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>+</mo> + <mi>x</mi> + <mi>z</mi> + <mo>·</mo> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> + </mtd></mtr + ><mtr + ><mtd + ><mo>-</mo> + <mi>z</mi> + <mo>·</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>+</mo> + <mi>x</mi> + <mi>y</mi> + <mo>·</mo> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> </mtd + ><mtd + ><mn>1</mn> + <mo>+</mo> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> + <mo>(</mo> + <mi>y2</mi> + <mo>-</mo> + <mn>1</mn> + <mo>)</mo> </mtd + ><mtd + ><mi>x</mi> + <mo>·</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>+</mo> + <mi>y</mi> + <mi>z</mi> + <mo>·</mo> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> + </mtd></mtr + ><mtr + ><mtd + ><mi>y</mi> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>+</mo> + <mi>xz</mi> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mi>x</mi> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>+</mo> + <mi>yz</mi> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> </mtd + ><mtd + ><mn>1</mn> + <mo>+</mo> + <mo>(</mo> + <mn>1</mn> + <mo>-</mo> + <mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + <mo>)</mo> + <mo>(</mo> + <mi>z2</mi> + <mo>-</mo> + <mn>1</mn> + <mo>)</mo> </mtd + ><mtd><mi>t</mi></mtd> </mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + <tr> + <th scope="col">ℝℙ^3 の同次座標</th> + <td> + <a + href="/en-US/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_hom4.png" + ><img src="transform-functions-rotate3d_hom4.png" + /></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> +<h3 id="Rotating_on_the_y-axis">Y 軸に沿って回転</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div>Normal</div> -<div class="rotated">Rotated</div></pre> +```html +<div>Normal</div> +<div class="rotated">Rotated</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">body { +```css +body { perspective: 800px; } @@ -87,22 +274,25 @@ div { 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> +{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} -<h3 id="Rotating_on_a_custom_axis" name="Rotating_on_a_custom_axis">独自の軸に沿って回転</h3> +<h3 id="Rotating_on_a_custom_axis">独自の軸に沿って回転</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><div>Normal</div> -<div class="rotated">Rotated</div></pre> +```html +<div>Normal</div> +<div class="rotated">Rotated</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">body { +```css +body { perspective: 800px; } @@ -116,38 +306,21 @@ div { 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> +{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatex()/index.md b/files/ja/web/css/transform-function/rotatex()/index.md index e7bfbd1d8c..111f7c1b0f 100644 --- a/files/ja/web/css/transform-function/rotatex()/index.md +++ b/files/ja/web/css/transform-function/rotatex()/index.md @@ -3,71 +3,150 @@ title: rotateX() slug: Web/CSS/transform-function/rotateX() tags: - CSS - - CSS Function - - CSS Transforms - - CSS 変形 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.rotateX translation_of: Web/CSS/transform-function/rotateX() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>rotateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`rotateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 -<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p> +> **Note:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。 -<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> +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 -<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`rotateX()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 -<p><code>rotateX()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p> +```css +rotateX(a) +``` -<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> +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"> + この変形は三次元空間に適用され、平面で表すことはできません。 + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo></mtd + ></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div>Normal</div> -<div class="rotated">Rotated</div></pre> +```html +<div>Normal</div> +<div class="rotated">Rotated</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -77,38 +156,21 @@ translation_of: Web/CSS/transform-function/rotateX() transform: rotateX(45deg); background-color: pink; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", "auto", 180)}}</p> +{{EmbedLiveSample("Examples", "auto", 180)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatey()/index.md b/files/ja/web/css/transform-function/rotatey()/index.md index f6e15b36a3..4ca3842ff6 100644 --- a/files/ja/web/css/transform-function/rotatey()/index.md +++ b/files/ja/web/css/transform-function/rotatey()/index.md @@ -3,71 +3,150 @@ title: rotateY() slug: Web/CSS/transform-function/rotateY() tags: - CSS - - CSS Function - - CSS Transforms - - CSS 変形 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.rotateY translation_of: Web/CSS/transform-function/rotateY() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>rotateY()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`rotateY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 -<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p> +> **Note:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。 -<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> +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 -<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`rotateY()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 -<p><code>rotateY()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p> +```css +rotateY(a) +``` -<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> +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"> + この変形は三次元空間に適用され、平面で表すことはできません。 + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo></mtd + ></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="rotated">Rotated</div></pre> +```html +<div>Normal</div> +<div class="rotated">Rotated</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -77,38 +156,21 @@ translation_of: Web/CSS/transform-function/rotateY() transform: rotateY(60deg); background-color: pink; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", "auto", 180)}}</p> +{{EmbedLiveSample("Examples", "auto", 180)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatez()/index.md b/files/ja/web/css/transform-function/rotatez()/index.md index 5c0618adf5..e6bc6dffae 100644 --- a/files/ja/web/css/transform-function/rotatez()/index.md +++ b/files/ja/web/css/transform-function/rotatez()/index.md @@ -3,71 +3,146 @@ title: rotateZ() slug: Web/CSS/transform-function/rotateZ() tags: - CSS - - CSS Function - - CSS Transforms - - CSS 変形 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.rotateZ translation_of: Web/CSS/transform-function/rotateZ() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>rotateZ()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 -<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p> +> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。 -<div class="note"> -<p><strong>メモ:</strong> <code>rotateZ(a)</code> は <code><a href="/ja/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> +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 -<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 -<p><code>rotateZ()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p> +```css +rotateZ(a) +``` -<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> +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"> + この変形は三次元空間に適用され、平面で表すことはできません。 + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>-</mo> + <mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>sin</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd + ><mo>cos</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div>Normal</div> -<div class="rotated">Rotated</div></pre> +```html +<div>Normal</div> +<div class="rotated">Rotated</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -77,38 +152,21 @@ translation_of: Web/CSS/transform-function/rotateZ() transform: rotateZ(45deg); background-color: pink; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", "auto", 180)}}</p> +{{EmbedLiveSample("Examples", "auto", 180)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/scale()/index.md b/files/ja/web/css/transform-function/scale()/index.md index e4b78176ec..f81c5606b2 100644 --- a/files/ja/web/css/transform-function/scale()/index.md +++ b/files/ja/web/css/transform-function/scale()/index.md @@ -3,75 +3,156 @@ title: scale() slug: Web/CSS/transform-function/scale() tags: - CSS - - CSS 変形 - CSS 関数 - - Reference + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.scale translation_of: Web/CSS/transform-function/scale() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>scale()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`scale()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元平面上における拡縮する変形を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。 -<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> +この変倍変形は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 -<p>座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は <a href="https://ja.wikipedia.org/wiki/点対称">点対称化</a> と大きさの変更を行います。1 と等しい場合、変倍は何もしません。</p> +座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 -<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div> +> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`](</ja/docs/Web/CSS/transform-function/scale3d()>) 関数を使用してください。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>scale()</code> 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。</p> +`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。 -<pre class="syntaxbox notranslate">scale(<var>sx</var>) +```css +scale(sx) -scale(<var>sx</var>, <var>sy</var>) -</pre> +scale(sx, sy) +``` -<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> +- `sx` + - : 変倍ベクトルの横座標を表す {{cssxref("<number>")}}。 +- `sy` + - : 変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 上のデカルト座標</th> + <th scope="col">ℝℙ^2 上の同次座標</th> + <th scope="col">ℝ^3 上のデカルト座標</th> + <th scope="col">ℝℙ^3 上の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 -<pre class="brush: html notranslate"><div>Normal</div> -<div class="scaled">Scaled</div></pre> +詳しくは以下の文書を参照してください。 -<h4 id="CSS">CSS</h4> +- [MDN WCAG の理解、ガイドライン 2.3 の解説](/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) +- [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) -<pre class="brush: css notranslate">div { +## 例 + +<h3 id="Scaling_the_X_and_Y_dimensions_together">X と Y の大きさを一緒に変倍する</h3> + +#### HTML + +```html +<div>Normal</div> +<div class="scaled">Scaled</div> +``` + +#### CSS + +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -81,22 +162,25 @@ scale(<var>sx</var>, <var>sy</var>) 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> +{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}} -<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> +<h3 id="Scaling_X_and_Y_dimensions_separately_and_translating_the_origin">X と Y の大きさを別々に変倍し、原点を平行移動させる</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="scaled">Scaled</div></pre> +```html +<div>Normal</div> +<div class="scaled">Scaled</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -107,52 +191,22 @@ scale(<var>sx</var>, <var>sy</var>) 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> +{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}} -<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> +{{Specifications}} -<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> +{{Compat}} -<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> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-function/scale3d()", "scale3d()")}} diff --git a/files/ja/web/css/transform-function/scale3d()/index.md b/files/ja/web/css/transform-function/scale3d()/index.md new file mode 100644 index 0000000000..8a8bec6701 --- /dev/null +++ b/files/ja/web/css/transform-function/scale3d()/index.md @@ -0,0 +1,171 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d() +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.scale3d +translation_of: Web/CSS/transform-function/scale3d() +--- +{{CSSRef}} + +**`scale3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間において要素を変倍する変形を定義します。 +変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-scale3d.html")}} + +この変倍変形は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 + +座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 + +## 構文 + +`scale3d()` 関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。 + +```css +scale3d(sx, sy, sz) +``` + +### 値 + +- `sx` + - : {{cssxref("<number>")}} で、変倍ベクトルの横軸を表します。 +- `sy` + - : {{cssxref("<number>")}} で、変倍ベクトルの縦軸を表します。 +- `sz` + - : {{cssxref("<number>")}} で、変倍ベクトルの Z 成分を表します。 + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ^2 上のデカルト座標</th> + <th scope="col">ℝℙ^2 上の同次座標</th> + <th scope="col">ℝ^3 上のデカルト座標</th> + <th scope="col">ℝℙ^3 上の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"> + この変形は三次元空間に適用され、平面で表すことはできません。 + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>sz</mi></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>sz</mi> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + </tbody> +</table> + +## 例 + +<h3 id="Without_changing_the_origin">原点の変更なし</h3> + +#### HTML + +```html +<div>Normal</div> +<div class="scaled">Scaled</div> +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Without_changing_the_origin","200","200")}} + +<h3 id="Translating_the_origin_of_the_transformation">変形の原点を移動</h3> + +#### HTML + +```html +<div>Normal</div> +<div class="scaled">Scaled</div> +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); + transform-origin: left; + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Translating_the_origin_of_the_transformation","200","200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`scaleZ()`](/ja/docs/Web/CSS/transform-function/scaleZ()) +- [`translate3d()`](/ja/docs/Web/CSS/transform-function/translate3d()) +- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/scalex()/index.md b/files/ja/web/css/transform-function/scalex()/index.md index 8548b169c4..231094820a 100644 --- a/files/ja/web/css/transform-function/scalex()/index.md +++ b/files/ja/web/css/transform-function/scalex()/index.md @@ -1,70 +1,137 @@ --- title: scaleX() slug: Web/CSS/transform-function/scaleX() +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.scaleX translation_of: Web/CSS/transform-function/scaleX() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<div><a href="/ja/docs/Web/CSS">CSS</a>の<strong><code>scaleX()</code></strong> 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。</div> +**`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>結果は <a href="/ja/docs/Web/CSS/transform-function" title="CSS の <transform-function> データ型は、要素の外見の変形を表します。変形関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。"><code><transform-function></code></a> データ型になります。</div> + -<div></div> +これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、垂直軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 -<div></div> +> **Note:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。 -<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="/ja/docs/Web/CSS/transform-origin" title="CSS の transform-origin プロパティは、要素の変形 (transform) における原点を設定します。"><code>transform-origin</code></a> プロパティで指定)。</p> +```css +scaleX(s) +``` -<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="/ja/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code>または<code><a href="/ja/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> +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 上のデカルト座標</th> + <th scope="col">ℝℙ^2 上の同次座標</th> + <th scope="col">ℝ^3 上のデカルト座標</th> + <th scope="col">ℝℙ^3 上の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>s</mi> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>s</mi> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>s</mi> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mi>s</mi> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="scaled">Scaled</div></pre> +```html +<div>Normal</div> +<div class="scaled">Scaled</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -74,43 +141,24 @@ translation_of: Web/CSS/transform-function/scaleX() 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> +{{EmbedLiveSample("Examples","200","200")}} -<h2 id="Browser_compatibility">Browser compatibility</h2> +## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -<p>{{Compat("css.types.transform-function")}}</p> +{{Compat}} -<h2 id="See_also">See also</h2> +## 関連情報 -<ul> - <li><code><a href="/ja/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> - <li><code><a href="/ja/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> +- [`scaleY()`](</ja/docs/Web/CSS/transform-function/scaleY()>) +- [`scaleZ()`](</ja/docs/Web/CSS/transform-function/scaleZ()>) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scaley()/index.md b/files/ja/web/css/transform-function/scaley()/index.md index 213942b13c..14ffbff444 100644 --- a/files/ja/web/css/transform-function/scaley()/index.md +++ b/files/ja/web/css/transform-function/scaley()/index.md @@ -3,69 +3,137 @@ title: scaleY() slug: Web/CSS/transform-function/scaleY() tags: - CSS - - CSS 変形 - CSS 関数 + - CSS 座標変換 + - 関数 - リファレンス +browser-compat: css.types.transform-function.scaleY translation_of: Web/CSS/transform-function/scaleY() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scaleY()</code></strong> 関数は、要素を Y 軸に沿って (垂直に) 拡縮する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<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> +これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 -<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> +> **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 +> +> `transform: rotateX(180deg);` === `transform: scaleY(-1);` -<p><code>transform: rotateX(180deg);</code> === <code>transform: scaleY(-1);</code></p> -</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +```css +scaleY(s) +``` -<pre class="syntaxbox notranslate">scaleY(s) -</pre> +### 値 -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>s</code></dt> - <dd>{{cssxref("<number>")}} で、要素のそれぞれの点を規則的に適用する拡大縮小係数を表します。</dd> -</dl> +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 上のデカルト座標</th> + <th scope="col">ℝℙ^2 上の同次座標</th> + <th scope="col">ℝ^3 上のデカルト座標</th> + <th scope="col">ℝℙ^3 上の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>s</mi></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>s</mi> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>s</mi> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mi>s</mi> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="scaled">Scaled</div></pre> +```html +<div>Normal</div> +<div class="scaled">Scaled</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -75,19 +143,24 @@ translation_of: Web/CSS/transform-function/scaleY() transform: scaleY(0.6); background-color: pink; } -</pre> +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} -<h4 id="Result" name="Result">結果</h4> +## 仕様書 -<p>{{EmbedLiveSample("Examples", 200, 200)}}</p> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- [`scaleX()`](</ja/docs/Web/CSS/transform-function/scaleX()>) +- [`scaleZ()`](</ja/docs/Web/CSS/transform-function/scaleZ()>) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scalez()/index.md b/files/ja/web/css/transform-function/scalez()/index.md new file mode 100644 index 0000000000..ed78c98b18 --- /dev/null +++ b/files/ja/web/css/transform-function/scalez()/index.md @@ -0,0 +1,142 @@ +--- +title: scaleZ() +slug: Web/CSS/transform-function/scaleZ() +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.scaleZ +--- +{{CSSRef}} + +**`scaleZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Z 軸に沿って変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}} + +これは要素のそれぞれの点の Z 座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleZ(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、Z 軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 + +上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 + +> **Note:** `scaleZ(sz)` は `scale3d(1, 1, sz)` と等価です。 + +## 構文 + +```css +scaleZ(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の Z 座標に適用される変倍率を表します。 + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ^2 上のデカルト座標</th> + <th scope="col">ℝℙ^2 上の同次座標</th> + <th scope="col">ℝ^3 上のデカルト座標</th> + <th scope="col">ℝℙ^3 上の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"> + この変形は三次元空間に適用され、平面で表すことはできません。 + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>s</mi></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>s</mi> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + </tbody> +</table> + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div>Normal</div> +<div class="perspective">Translated</div> +<div class="scaled-translated">Scaled</div> +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.perspective { + /* 三次元空間を生成するために視点を含める */ + transform: perspective(400px) translateZ(-100px); + background-color: limegreen; +} + +.scaled-translated { + /* 三次元空間を生成するために視点を含める */ + transform: perspective(400px) scaleZ(2) translateZ(-100px); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`scaleX()`](/ja/docs/Web/CSS/transform-function/scaleX()) +- [`scaleY()`](/ja/docs/Web/CSS/transform-function/scaleY()) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/skew()/index.md b/files/ja/web/css/transform-function/skew()/index.md index f99a4a1ea0..826a6e12fc 100644 --- a/files/ja/web/css/transform-function/skew()/index.md +++ b/files/ja/web/css/transform-function/skew()/index.md @@ -3,76 +3,180 @@ title: skew() slug: Web/CSS/transform-function/skew() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.skew translation_of: Web/CSS/transform-function/skew() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`skew()`** は [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-skew.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。 -<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。</p> +それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 -<p>それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。 -<p><code>skew()</code> で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。1つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。</p> +```css +skew(ax) -<pre class="syntaxbox notranslate">skew(<var>ax</var>) +skew(ax, ay) +``` -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> +- `ax` + - : {{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。 +- `ay` + - : {{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `0` となり、水平方向にのみゆがめます。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>ax</mi> + <mo>)</mo> + </mtd></mtr + ><mtr + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>ay</mi> + <mo>)</mo> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>ax</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>ay</mi> + <mo>)</mo> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ><mtr></mtr></mtable></mfenced + ></math> + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>ax</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>ay</mi> + <mo>)</mo> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>ax</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>ay</mi> + <mo>)</mo> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +<h3 id="Skewing_on_the_x-axis_only">X 軸のみの変形</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="skewed">Skewed</div></pre> +```html +<div>Normal</div> +<div class="skewed">Skewed</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">body { +```css +body { margin: 20px; } @@ -86,22 +190,25 @@ div { 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> +{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}} -<h3 id="Skewing_on_both_axes" name="Skewing_on_both_axes">両方の軸の変形</h3> +<h3 id="Skewing_on_both_axes">両方の軸の変形</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="skewed">Skewed</div></pre> +```html +<div>Normal</div> +<div class="skewed">Skewed</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">body { +```css +body { margin: 20px; } @@ -115,40 +222,23 @@ div { 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> +{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<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> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [skewX()](/ja/docs/Web/CSS/transform-function/skewX()) +- [skewY()](/ja/docs/Web/CSS/transform-function/skewY()) diff --git a/files/ja/web/css/transform-function/skewx()/index.md b/files/ja/web/css/transform-function/skewx()/index.md index d84043f6ef..353c7dd058 100644 --- a/files/ja/web/css/transform-function/skewx()/index.md +++ b/files/ja/web/css/transform-function/skewx()/index.md @@ -3,111 +3,180 @@ title: skewX() slug: Web/CSS/transform-function/skewX() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.skewX translation_of: Web/CSS/transform-function/skewX() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`skewX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-skewX.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 -<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p> +> **Note:** `skewX(a)` は `skew(a)` と等価です。 -<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> +```css +skewX(a) +``` -<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> +- `a` + - : {{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> + </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="skewed">Skewed</div></pre> +```html +<div>Normal</div> +<div class="skewed">Skewed</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; } .skewed { - transform: skewX(10deg); /* Equal to skew(10deg) */ + transform: skewX(10deg); /* skew(10deg) と同じ */ background-color: pink; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", 200, 200)}}</p> +{{EmbedLiveSample("Examples", 200, 200)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/skewy()/index.md b/files/ja/web/css/transform-function/skewy()/index.md index 8d19654b1d..07a978b3f5 100644 --- a/files/ja/web/css/transform-function/skewy()/index.md +++ b/files/ja/web/css/transform-function/skewy()/index.md @@ -3,66 +3,151 @@ title: skewY() slug: Web/CSS/transform-function/skewY() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.skewY translation_of: Web/CSS/transform-function/skewY() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`skewY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-skewY.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 -<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +```css +skewY(a) +``` -<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> +- `a` + - : {{cssxref("<angle>")}} で、縦座標方向にゆがめるのに使用する角度を表します。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd + ><mo>tan</mo> + <mo>(</mo> + <mi>a</mi> + <mo>)</mo> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div>Normal</div> -<div class="skewed">Skewed</div></pre> +```html +<div>Normal</div> +<div class="skewed">Skewed</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 80px; height: 80px; background-color: skyblue; @@ -72,38 +157,21 @@ translation_of: Web/CSS/transform-function/skewY() transform: skewY(40deg); background-color: pink; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", 200, 200)}}</p> +{{EmbedLiveSample("Examples", 200, 200)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate()/index.md b/files/ja/web/css/transform-function/translate()/index.md index 01b7d7e801..e3b28bdc1a 100644 --- a/files/ja/web/css/transform-function/translate()/index.md +++ b/files/ja/web/css/transform-function/translate()/index.md @@ -3,84 +3,144 @@ title: translate() slug: Web/CSS/transform-function/translate() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.translate translation_of: Web/CSS/transform-function/translate() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<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> 値 */ +```css +/* 単一の <length-percentage> 値 */ transform: translate(200px); transform: translate(50%); -/* 二つの <length-percentage> 値 */ +/* 二つの <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> +- 単一の `<length-percentage>` values + - : この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2)` は `translate(2, 0)` と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。 +- 二つの `<length-percentage>` 値 + - : この値は 2 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <p> + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + </p> + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>tx</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mi>ty</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>tx</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mi>ty</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mi>tx</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mi>ty</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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="/ja/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>) -</pre> +```css +translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) +``` -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Using_a_single-axis_translation" name="Using_a_single-axis_translation">単一軸を使用した変形</h3> +<h3 id="Using_a_single-axis_translation">単一軸を使用した変形</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Static</div> -<div class="moved">Moved</div> -<div>Static</div></pre> +```html +<div>Static</div> +<div class="moved">Moved</div> +<div>Static</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 60px; height: 60px; background-color: skyblue; @@ -90,23 +150,26 @@ transform: translate(30%, 50%); 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> +{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} -<h3 id="Combining_y-axis_and_x-axis_translation" name="Combining_y-axis_and_x-axis_translation">Y 軸と X 軸の変換の組み合わせ</h3> +<h3 id="Combining_y-axis_and_x-axis_translation">Y 軸と X 軸の変換の組み合わせ</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Static</div> -<div class="moved">Moved</div> -<div>Static</div></pre> +```html +<div>Static</div> +<div class="moved">Moved</div> +<div>Static</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 60px; height: 60px; background-color: skyblue; @@ -116,38 +179,21 @@ transform: translate(30%, 50%); 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> +{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate3d()/index.md b/files/ja/web/css/transform-function/translate3d()/index.md index 2096870fb1..0d614fbd1a 100644 --- a/files/ja/web/css/transform-function/translate3d()/index.md +++ b/files/ja/web/css/transform-function/translate3d()/index.md @@ -3,71 +3,96 @@ title: translate3d() slug: Web/CSS/transform-function/translate3d() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.translate3d translation_of: Web/CSS/transform-function/translate3d() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 -<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} -<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> +```css +translate3d(tx, ty, tz) +``` -<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> +- `tx` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `ty` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `tz` + - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"> + <p> + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + </p> + </td> + <td> + ℝ^3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mi>tx</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mi>ty</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mi>tz</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +<h3 id="Using_a_single_axis_translation">単一軸の座標変換の使用</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Static</div> -<div class="moved">Moved</div> -<div>Static</div></pre> +```html +<div>Static</div> +<div class="moved">Moved</div> +<div>Static</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 60px; height: 60px; background-color: skyblue; @@ -78,23 +103,26 @@ translation_of: Web/CSS/transform-function/translate3d() 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> +{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}} -<h3 id="Combining_z-axis_and_x-axis_translation" name="Combining_z-axis_and_x-axis_translation">z 軸と x 軸を組み合わせた変換</h3> +<h3 id="Combining_z-axis_and_x-axis_translation">z 軸と x 軸を組み合わせた座標変換</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>Static</div> -<div class="moved">Moved</div> -<div>Static</div></pre> +```html +<div>Static</div> +<div class="moved">Moved</div> +<div>Static</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 60px; height: 60px; background-color: skyblue; @@ -104,38 +132,21 @@ translation_of: Web/CSS/transform-function/translate3d() 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> +{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatex()/index.md b/files/ja/web/css/transform-function/translatex()/index.md index 89f2ee7199..1d0797b735 100644 --- a/files/ja/web/css/transform-function/translatex()/index.md +++ b/files/ja/web/css/transform-function/translatex()/index.md @@ -1,79 +1,137 @@ --- title: translateX() -slug: orphaned/Web/CSS/transform-function/translateX +slug: Web/CSS/transform-function/translateX() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/translateX + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.translateX +translation_of: Web/CSS/transform-function/translateX() original_slug: Web/CSS/transform-function/translateX --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<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> +> **Note:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css notranslate">/* <length-percentage> values */ +```css +/* <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> +- `<length-percentage>` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <p> + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + </p> + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>t</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mi>t</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mi>t</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></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> +```css +translateX({{cssxref("<length-percentage>")}}) +``` -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div>Static</div> -<div class="moved">Moved</div> -<div>Static</div></pre> +```html +<div>Static</div> +<div class="moved">Moved</div> +<div>Static</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 60px; height: 60px; background-color: skyblue; @@ -83,38 +141,23 @@ transform: translateX(50%); transform: translateX(10px); /* translate(10px) と等価 */ background-color: pink; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> +{{EmbedLiveSample("Examples", 250, 250)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- [`translate()`](/ja/docs/Web/CSS/transform-function/translate()) +- [`translateY()`](/ja/docs/Web/CSS/transform-function/translateY()) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatey()/index.md b/files/ja/web/css/transform-function/translatey()/index.md index ea004906f7..ef8f624a29 100644 --- a/files/ja/web/css/transform-function/translatey()/index.md +++ b/files/ja/web/css/transform-function/translatey()/index.md @@ -3,112 +3,172 @@ title: translateY() slug: Web/CSS/transform-function/translateY() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.translateY translation_of: Web/CSS/transform-function/translateY() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/s/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 -<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="/ja/s/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a hrehref="/ja/eb/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p> -</div> +> **Note:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css notranslate">/* <length-percentage> values */ -transform: translateX(200px); -transform: translateX(50%); -</pre> +```css +/* <length-percentage> 値 */ +transform: translateY(200px); +transform: translateY(50%); +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><length-percentage></code></dt> - <dd>変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。</dd> -</dl> +- `<length-percentage>` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + <p> + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + </p> + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> </mtr + ><mtr + ><mtd><mn>0</mn></mtd> + <mtd><mn>1</mn></mtd> + <mtd><mi>t</mi></mtd> </mtr + ><mtr + ><mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> </mtr + ><mtr + ><mtd><mn>0</mn></mtd> + <mtd><mn>1</mn></mtd> + <mtd><mi>t</mi></mtd> </mtr + ><mtr + ><mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + <td rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> </mtr + ><mtr + ><mtd><mn>0</mn></mtd> + <mtd><mn>1</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mi>t</mi></mtd> </mtr + ><mtr + ><mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>1</mn></mtd> + <mtd><mn>0</mn></mtd> </mtr + ><mtr + ><mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>0</mn></mtd> + <mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + <tr> + <td><code>[1 0 0 1 0 t]</code></td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +### 形式文法 -<h3 id="HTML">HTML</h3> +```css +translateY({{cssxref("<length-percentage>")}}) +``` -<pre class="brush: html notranslate"><div>Static</div> -<div class="moved">Moved</div> -<div>Static</div></pre> +<h2 id="Examples">例</h2> -<h3 id="CSS">CSS</h3> +### HTML -<pre class="brush: css notranslate">div { +```html +<div>Static</div> +<div class="moved">Moved</div> +<div>Static</div> +``` + +### CSS + +```css +div { width: 60px; height: 60px; background-color: skyblue; } .moved { - transform: translateX(10px); /* translate(10px) と等価 */ + transform: translateY(10px); background-color: pink; } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> +{{EmbedLiveSample("Examples", 250, 250)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatez()/index.md b/files/ja/web/css/transform-function/translatez()/index.md index 75367b6518..400c67a02f 100644 --- a/files/ja/web/css/transform-function/translatez()/index.md +++ b/files/ja/web/css/transform-function/translatez()/index.md @@ -4,70 +4,93 @@ slug: Web/CSS/transform-function/translateZ() tags: - 3D - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.translateZ translation_of: Web/CSS/transform-function/translateZ() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 -<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 -<p>この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。</p> +上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 -<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> +> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 -<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> +```css +translateZ(tz) +``` -<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> +- `tz` + - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 <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> + <thead> + <tr> + <th scope="col">ℝ^2 のデカルト座標</th> + <th scope="col">ℝℙ^2 の同次座標</th> + <th scope="col">ℝ^3 のデカルト座標</th> + <th scope="col">ℝℙ^3 の同次座標</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"> + この変換は 3 次元空間に適用されます。平面上では表現できません。 + </td> + <td> + この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr + ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>1</mn> </mtd><mtd><mi>t</mi> </mtd></mtr + ><mtr + ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd + ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<p>この例では、2 つのボックスが作成されます。 1 つは通常変換されずにページ上に配置されます。 2 番目の方法は、3D 空間を作成するためのパースペクティブを適用して変更し、ユーザーに向かって移動します。</p> +この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div>Static</div> -<div class="moved">Moved</div></pre> +```html +<div>Static</div> +<div class="moved">Moved</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">div { +```css +div { position: relative; width: 60px; height: 60px; @@ -79,44 +102,28 @@ translation_of: Web/CSS/transform-function/translateZ() 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> +ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 +[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 -<p>次に、<code>translateZ()</code> 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、2D ディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の 3D ディスプレイデバイスを使用して見たときに要素をより近く見せるという効果があります。</p> +次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 -<p>なお、 <code>perspective()</code> の値が <code>translateZ()</code> の値よりも小さい場合、例えば <code>transform: perspective(200px) translateZ(300px);</code> の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。</p> +なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> +{{EmbedLiveSample("Examples", 250, 250)}} -<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> +{{Specifications}} -<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> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} |