From a81cea7d8b08d1765dcc5ea62e6238dd1d596a05 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 02:21:04 +0900 Subject: CSS 座標変換関数のリファレンスを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/21 時点の英語版に同期 --- files/ja/_redirects.txt | 2 +- files/ja/web/css/transform-function/index.md | 6 +- .../web/css/transform-function/matrix()/index.md | 201 +++++++----- .../web/css/transform-function/matrix3d()/index.md | 188 +++++------ .../css/transform-function/perspective()/index.md | 195 ++++++------ .../web/css/transform-function/rotate()/index.md | 296 +++++++++++++----- .../web/css/transform-function/rotate3d()/index.md | 345 ++++++++++++++++----- .../web/css/transform-function/rotatex()/index.md | 204 +++++++----- .../web/css/transform-function/rotatey()/index.md | 204 +++++++----- .../web/css/transform-function/rotatez()/index.md | 200 +++++++----- .../ja/web/css/transform-function/scale()/index.md | 246 +++++++++------ .../web/css/transform-function/scale3d()/index.md | 171 ++++++++++ .../web/css/transform-function/scalex()/index.md | 204 +++++++----- .../web/css/transform-function/scaley()/index.md | 179 +++++++---- .../web/css/transform-function/scalez()/index.md | 142 +++++++++ .../ja/web/css/transform-function/skew()/index.md | 264 ++++++++++------ .../ja/web/css/transform-function/skewx()/index.md | 217 ++++++++----- .../ja/web/css/transform-function/skewy()/index.md | 208 ++++++++----- .../css/transform-function/translate()/index.md | 222 +++++++------ .../css/transform-function/translate3d()/index.md | 179 ++++++----- .../css/transform-function/translatex()/index.md | 199 +++++++----- .../css/transform-function/translatey()/index.md | 212 ++++++++----- .../css/transform-function/translatez()/index.md | 155 ++++----- files/ja/web/css/translation-value/index.md | 153 +++++++++ 24 files changed, 3099 insertions(+), 1493 deletions(-) create mode 100644 files/ja/web/css/transform-function/scale3d()/index.md create mode 100644 files/ja/web/css/transform-function/scalez()/index.md create mode 100644 files/ja/web/css/translation-value/index.md (limited to 'files') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index a36204d864..bdabadc295 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3786,7 +3786,7 @@ /ja/docs/Web/CSS/transform-function/skewY /ja/docs/Web/CSS/transform-function/skewY() /ja/docs/Web/CSS/transform-function/translate /ja/docs/Web/CSS/transform-function/translate() /ja/docs/Web/CSS/transform-function/translate3d /ja/docs/Web/CSS/transform-function/translate3d() -/ja/docs/Web/CSS/transform-function/translateX /ja/docs/orphaned/Web/CSS/transform-function/translateX +/ja/docs/Web/CSS/transform-function/translateX /ja/docs/Web/CSS/transform-function/translateX() /ja/docs/Web/CSS/transform-function/translateY /ja/docs/Web/CSS/transform-function/translateY() /ja/docs/Web/CSS/transform-function/translateZ /ja/docs/Web/CSS/transform-function/translateZ() /ja/docs/Web/CSS/uri /ja/docs/Web/CSS/url() 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 の行列で記述されます。 ac bd @@ -113,9 +113,9 @@ CSS (および多くのコンピューターグラフィック) では、原点 ## 例 -

変換関数の比較

+

座標変換関数の比較

-次の例では、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() --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の matrix() 関数は、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
-

メモ: matrix(a, b, c, d, tx, ty) は matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) の短縮形です。

-
+> **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)` の短縮形です。 -

構文

+## 構文 -

matrix() 関数は6つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。

+`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 -
メモ: Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を tx および ty で受け付けていました。
+```css +matrix(a, b, c, d, tx, ty) +``` -
matrix(a, b, c, d, tx, ty)
-
+### 値 -

値

- -
-
a b c d
-
{{cssxref("<number>")}} で、線形変換を記述します。
-
tx ty
-
{{cssxref("<number>")}} で、適用する変換を記述します。
-
+- _a_ _b_ _c_ _d_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _tx_ _ty_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ a c b d + + a c tx b d ty 0 0 1 + + a c tx b d ty 0 0 1 + + a c 0 tx b d 0 ty 0 0 1 0 0 0 0 1 +
[a b c d tx ty]
-

例

+値は次の関数を表します。 +`matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )` + +

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="changed">Changed</div>
+```html +
Normal
+
Changed
+``` -

CSS

+### 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;
-}
+} +``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 350, 350)}}

+{{EmbedLiveSample("Examples", 350, 350)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 - +- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の matrix3d() 関数は、 4x4 の三次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 +結果は {{cssxref("<transform-function>")}} データ型になります。 -

構文

+## 構文 -

matrix3d() 関数は16の値で指定します。列優先の順で記述します。

+`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 -
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
+```css +matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) +``` -

値

+### 値 -
-
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
-
{{cssxref("<number>")}} で、線形変換を記述します。
-
a4 b4 c4 d4
-
{{cssxref("<number>")}} で、適用する変換を記述します。
-
- -
注: Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を a4, b4, c4 で受け付けていました。
+- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ + _a3_ _b3_ _c3_ _d3_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _a4_ _b4_ _c4 d4_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変換は三次元空間に適用され、平面で表現することはできません。一般的な三次元アファイン変換は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変換は三次元空間に適用され、平面で表現することはできません。 + + 一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + + a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4 +
-

例

+## 例 -

つぶれる立方体の例

+### つぶれる立方体の例 -

次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで matrix3d() 変換を適用することができます。

+次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。 -

HTML

+#### 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>
-
+```html +
+ 
1
+ 
2
+ 
3
+ 
4
+ 
5
+ 
6
+
+``` -

CSS

+#### CSS -
#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);
-}
+} +``` -

結果

+#### 結果 -
{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}}
+{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} -

行列変換と拡大縮小の例

+### 行列変換と拡大縮小の例 -

もう一つの transform3d() の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。

+もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 -

HTML

+#### HTML -
<div class="foo">
+```html
+

 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>
-
+ +``` -

CSS

+#### CSS -
html {
+```css
+html {
   width: 100%;
 }
 body {
@@ -202,39 +232,23 @@ body {
       50,100,0,1.1
     )
   }
-}
+} +``` -

結果

+#### 結果 -
{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}
+{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}{{Spec2("CSS Transforms 2")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 - +- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の perspective() 関数は、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`perspective()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。 -
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
+{{EmbedInteractiveExample("pages/css/function-perspective.html")}} - +`perspective()` 座標変換関数は {{cssxref('transform')}} 値の一部で、変形される要素に適用されます。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。 -

perspective() 変形関数は、変形される要素に適用される {{cssxref('transform')}} 値の一部です。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に変形される子の親に付けられるのとは異なります。

+## 構文 -

構文

+`perspective()` で使用する視点距離は、{{cssxref("<length>")}} 値でユーザーと z=0 平面との間の距離を指定するか、または `none` で指定します。 +z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。 +負の値は構文エラーになります。 +`1px` より小さい値 (ゼロを含む) は `1px` になります。 +値が `none` 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。 +z 位置が `perspective` の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。 +`perspective()` が大きいと、変形が小さいことを表します。`perspective()` の値が小さいと、変形が大きいことを表します。`perspective(none)` は無限の距離からの遠近感を表し、変形はありません。 -

perspective() を使用してしている視点距離は {{cssxref("<length>")}} 値で指定し、ユーザーと z=0 平面との間の距離を表します。 z=0 平面は二次元で表示されるすべてのものが表示される平面であり、または画面の平面です。正の数を指定すると、要素はインターフェイスの他のものよりもユーザーの近くに表示され、負の数を指定すると、遠くに表示されます。値がより大きくなるほど、ユーザーの視点は遠ざかります。

+```css +perspective(d) +``` -
perspective(d)
-
+### 値 -

値

- -
-
d
-
{{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。
-
+- _d_ + - : {{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
-

この変換は三次元空間に適用され、平面で表現することはできません。

- 		この変換は ℝ3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 10000100001000−1/d1
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変換は三次元空間に適用され、平面で表現することはできません。 + この変換は ℝ^3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − + 1 + / + d 1 +
-

例

- -

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

- -
.face {
+
例

+
+### HTML
+
+```html
+
Without perspective:

+

+  
A

+  
B

+  
C

+

+
+
With perspective (9cm):

+

+  
A

+  
B

+  
C

+

+
+
With perspective (4cm):

+

+  
A

+  
B

+  
C

+

+```
+
+### CSS
+
+```css
+.face {
   position: absolute;
   width: 100px;
   height: 100px;
@@ -121,38 +153,21 @@ p + div {
   background-color: limegreen;
   transform: translate3d(0, 0, 50px);
 }
-
+``` -

結果

+### 結果 -

{{ EmbedLiveSample('Examples', '250', '350') }}

+{{ EmbedLiveSample('Examples', '250', '350') }} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}{{Spec2("CSS Transforms 2")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 - +- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の rotate() 関数は、要素を二次元平面上の特定の点を中心に、変形させずに回転させます。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -

要素が回転する中心となる特定の点 — 前述 — は、変形原点とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。

+要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 -

構文

+## 構文 -

rotate() で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180度で回転したものは点対称と呼ばれます。

+`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 -
rotate(a)
-
+```css +rotate(a) +``` -

値

+### 値 -
-
a
-
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
-
+- _a_ + - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 + 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ cos + ( + a + ) - + sin + ( + a + ) + sin + ( + a + ) cos + ( + a + ) + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 0 0 0 0 1 +
[cos(a) sin(a) -sin(a) cos(a) 0 0]
-

例

+## 例 -

基本的な例

+

基本的な例

-

HTML

+#### HTML -
<div>Normal</div>
-<div class="rotated">Rotated</div>
+```html +
Normal
+
Rotated
+``` -

CSS

+#### CSS -
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;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Basic_example", "auto", 180)}}

+{{EmbedLiveSample("Basic_example", "auto", 180)}} -

回転とその他の変形の組み合わせ

+

回転とその他の変形の組み合わせ

-

複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。

+複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 -

HTML

+#### HTML -
<div>Normal</div>
-<div class="rotate">Rotated</div>
-<div class="rotate-translate">Rotated + Translated</div>
-<div class="translate-rotate">Translated + Rotated</div>
-
+```html +
Normal
+
Rotated
+
Rotated + Translated
+
Translated + Rotated
+``` -

CSS

+#### CSS -
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);
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}}

+{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 - +- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の rotate3d() 関数は、要素を三次元空間内の固定した軸を中心に、変形させずに回転させます。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`rotate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)は、要素を三次元空間内の固定した軸を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
+{{EmbedInteractiveExample("pages/css/rotate3d.html")}} - +三次元空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが*正規化*されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル \[0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。 -

3D 空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は [x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが正規化されていない場合 (すなわち、3つの座標の2乗の合計が1ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル [0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。

+> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 -
メモ: 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
+## 構文 -

構文

+`rotate3d()` で行う回転の量は、3 つの {{cssxref("<number>")}} および 1 つの {{cssxref("<angle>")}} で指定します。 `` は回転軸を表すベクトルの X, Y, Z 座標を表します。 `` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。 -

rotate3d() で行う回転の量は、3つの {{cssxref("<number>")}} および1つの {{cssxref("<angle>")}} で指定します。 <number> は回転軸を表すベクトルの X, Y, Z 座標を表します。 <angle> は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。

+```css +rotate3d(x, y, z, a) +``` -
rotate3d(x, y, z, a)
-
+### 値 -

値

- -
-
x
-
{{cssxref("<number>")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。
-
y
-
{{cssxref("<number>")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。
-
z
-
{{cssxref("<number>")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。
-
a
-
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
-
+- `x` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。 +- `y` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。 +- `z` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。 +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標この変形は三次元空間に適用され、平面で表すことはできません。
ℝℙ2 の同次座標
ℝ3 のデカルト座標 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
ℝℙ3 の同次座標
ℝ^2 のデカルト座標 + この変形は三次元空間に適用され、平面で表すことはできません。 +
ℝℙ^2 の同次座標
ℝ^3 のデカルト座標 + + 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + x + 2 - + 1 + ) z + · + sin + ( + a + ) + + + x + y + ( + 1 + - + cos + ( + a + ) + ) - + y + · + sin + ( + a + ) + + + x + z + · + ( + 1 + - + cos + ( + a + ) + ) + - + z + · + sin + ( + a + ) + + + x + y + · + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + y2 + - + 1 + ) x + · + sin + ( + a + ) + + + y + z + · + ( + 1 + - + cos + ( + a + ) + ) + y + sin + ( + a + ) + + + xz + ( + 1 + - + cos + ( + a + ) + ) - + x + sin + ( + a + ) + + + yz + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + z2 + - + 1 + ) t 0 0 0 1 +
ℝℙ^3 の同次座標 + +
-

例

+## 例 -

Y 軸に沿って回転

+

Y 軸に沿って回転

-

HTML

+#### HTML -
<div>Normal</div>
-<div class="rotated">Rotated</div>
+```html +
Normal
+
Rotated
+``` -

CSS

+#### CSS -
body {
+```css
+body {
   perspective: 800px;
 }
 
@@ -87,22 +274,25 @@ div {
   transform: rotate3d(0, 1, 0, 60deg);
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

+{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} -

独自の軸に沿って回転

+

独自の軸に沿って回転

-

HTML

+#### HTML -
<div>Normal</div>
-<div class="rotated">Rotated</div>
+```html +
Normal
+
Rotated
+``` -

CSS

+#### CSS -
body {
+```css
+body {
   perspective: 800px;
 }
 
@@ -116,38 +306,21 @@ div {
   transform: rotate3d(1, 2, -1, 192deg);
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

+{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-rotate3d", "rotate3d()")}}{{Spec2("CSS Transforms 2")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

rotateX() は CSS 関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`rotateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}
+{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} - +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 -

回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。

+> **Note:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。 -
-

メモ: rotateX(a) は rotate3d(1, 0, 0, a) と等価です。

-
+> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 -
メモ: 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
+## 構文 -

構文

+`rotateX()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 -

rotateX() で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。

+```css +rotateX(a) +``` -
rotateX(a)
-
+### 値 -

値

- -
-
a
-
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
-
+- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変形は三次元空間に適用され、平面で表すことはできません。 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変形は三次元空間に適用され、平面で表すことはできません。 + + 1 0 0 0 cos + ( + a + ) - + sin + ( + a + ) + 0 sin + ( + a + ) cos + ( + a + ) + + 1 0 0 0 0 cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 +
-

例

+

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="rotated">Rotated</div>
+```html +
Normal
+
Rotated
+``` -

CSS

+### 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;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", "auto", 180)}}

+{{EmbedLiveSample("Examples", "auto", 180)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}{{Spec2("CSS Transforms 2")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

rotateY() は CSS 関数で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`rotateY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}
+{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} - +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 -

回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。

+> **Note:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。 -
-

メモ: rotateY(a) は rotate3d(0, 1, 0, a) と等価です。

-
+> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 -
メモ: 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
+## 構文 -

構文

+`rotateY()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 -

rotateY() で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。

+```css +rotateY(a) +``` -
rotateY(a)
-
+### 値 -

値

- -
-
a
-
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
-
+- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変形は三次元空間に適用され、平面で表すことはできません。 cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変形は三次元空間に適用され、平面で表すことはできません。 + + cos + ( + a + ) 0 sin + ( + a + ) + 0 1 0 - + sin + ( + a + ) 0 cos + ( + a + ) + + cos + ( + a + ) 0 sin + ( + a + ) 0 0 1 0 0 - + sin + ( + a + ) 0 cos + ( + a + ) 0 0 0 0 1 +
-

例

+

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="rotated">Rotated</div>
+```html +
Normal
+
Rotated
+``` -

CSS

+### CSS -
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;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", "auto", 180)}}

+{{EmbedLiveSample("Examples", "auto", 180)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}{{Spec2("CSS Transforms 2")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

rotateZ() は CSS 関数で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
+{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} - +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 -

回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。

+> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。 -
-

メモ: rotateZ(a) は rotate(a) または rotate3d(0, 0, 1, a) と等価です。

-
+> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 -
メモ: 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
+## 構文 -

構文

+`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 -

rotateZ() で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。

+```css +rotateZ(a) +``` -
rotateZ(a)
-
+### 値 -

値

- -
-
a
-
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
-
+- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変形は三次元空間に適用され、平面で表すことはできません。 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変形は三次元空間に適用され、平面で表すことはできません。 + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 0 0 0 0 1 +
-

例

+

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="rotated">Rotated</div>
+```html +
Normal
+
Rotated
+``` -

CSS

+### 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;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", "auto", 180)}}

+{{EmbedLiveSample("Examples", "auto", 180)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}{{Spec2("CSS Transforms 2")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

scale() は CSS 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`scale()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元平面上における拡縮する変形を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。 -

+![](scale.png) -

この変形は、二次元ベクトルによって特徴づけられます。座標でどれほどの変倍が各方向において行われるのかを定義します。両方の座標が等しい場合、変倍は一様 (つまり等方的) で、要素の形が保たれます (変倍関数は 相似変換 を定義します)。

+この変倍変形は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 -

座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は 点対称化 と大きさの変更を行います。1 と等しい場合、変倍は何もしません。

+座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 -
メモ: scale() 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 scale3d() 関数を使用してください。
+> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`]() 関数を使用してください。 -

構文

+## 構文 -

scale() 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。

+`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。 -
scale(sx)
+```css
+scale(sx)
 
-scale(sx, sy)
-
+scale(sx, sy) +``` -

値

+### 値 -
-
sx
-
変倍ベクトルの横座標を表す {{cssxref("<number>")}}。
-
sy
-
変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これのデフォルト値は sx であり、要素の形を保つ一様な変倍となります。
-
+- `sx` + - : 変倍ベクトルの横座標を表す {{cssxref("<number>")}}。 +- `sy` + - : 変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 上のデカルト座標ℝℙ2 上の同次座標ℝ3 上のデカルト座標ℝℙ3 上の同次座標
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
+ sx 0 0 sy + + sx 0 0 0 sy 0 0 0 1 + + sx 0 0 0 sy 0 0 0 1 + + sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 +
[sx 0 0 sy 0 0]
-

例

+## アクセシビリティの考慮 -

X と Y の大きさを一緒に変倍する

+拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 -

HTML

+また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 -
<div>Normal</div>
-<div class="scaled">Scaled</div>
+詳しくは以下の文書を参照してください。 -

CSS

+- [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) -
div {
+## 例
+
+
X と Y の大きさを一緒に変倍する

+
+#### HTML
+
+```html
+
Normal

+
Scaled

+```
+
+#### CSS
+
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -81,22 +162,25 @@ scale(sx, sy)
   transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

+{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}} -

X と Y の大きさを別々に変倍し、原点を平行移動させる

+

X と Y の大きさを別々に変倍し、原点を平行移動させる

-

HTML

+#### HTML -
<div>Normal</div>
-<div class="scaled">Scaled</div>
+```html +
Normal
+
Scaled
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -107,52 +191,22 @@ scale(sx, sy)
   transform-origin: left;
   background-color: pink;
 }
-
- -

Result

+``` -

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

+#### 結果 -

アクセシビリティの考慮事項

+{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}} -

拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。

+## 仕様書 -

また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用してメディアクエリを書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。

- -

詳しくは以下の文書を参照してください。

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-scale", "scale()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

互換性の情報は <transform-function> データ型をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • {{cssxref("transform-function/scale3d", "scale3d()")}}
    • -
+- {{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 成分を表します。 + + + + + + + + + + + + + + + + + +
ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
+ この変形は三次元空間に適用され、平面で表すことはできません。 + + sx 0 0 0 sy 0 0 0 sz + + sx 0 0 0 0 sy 0 0 0 0 sz 0 0 0 0 1 +
+ +## 例 + +

原点の変更なし

+ +#### HTML + +```html +
Normal
+
Scaled
+``` + +#### 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")}} + +

変形の原点を移動

+ +#### HTML + +```html +
Normal
+
Scaled
+``` + +#### 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() --- -
{{CSSRef}}
+{{CSSRef}} -
CSSのscaleX() 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。
+**`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
結果は <transform-function> データ型になります。
+![](scalex.png) -
+これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、垂直軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 -
+> **Note:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。 -

+## 構文 -

係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 scaleX(-1) は軸の線対称を定義し、垂直軸は原点を通過します (transform-origin プロパティで指定)。

+```css +scaleX(s) +``` -
-

メモ: scaleX(sx)は scale(sx, 1)またはscale3d(sx, 1, 1)と等価です。

-
+### 値 -

Syntax

- -
scaleX(s)
-
- -

Values

- -
-
s
-
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.
-
+- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
+ s 0 0 1 + + s 0 0 0 1 0 0 0 1 + + s 0 0 0 1 0 0 0 1 + + s 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 +
[s 0 0 1 0 0]
-

Examples

+

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="scaled">Scaled</div>
+```html +
Normal
+
Scaled
+``` -

CSS

+### CSS -
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;
 }
-
- -

Result

+``` -

{{EmbedLiveSample("Examples","200","200")}}

+### 結果 -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+{{EmbedLiveSample("Examples","200","200")}} -

Browser compatibility

+## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -

{{Compat("css.types.transform-function")}}

+{{Compat}} -

See also

+## 関連情報 -
    -
  • scaleY()
    • -
  • scaleZ()
    • -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • {{cssxref("transform-origin")}}
    • -
+- [`scaleY()`]() +- [`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() --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の scaleY() 関数は、要素を Y 軸に沿って (垂直に) 拡縮する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -

+![](scaley.png) -

係数が 1 である場合を除いて、各要素点の縦座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 scaleY(-1) は軸の線対称を定義し、水平軸は原点を通過します ({{cssxref("transform-origin")}} プロパティで指定)。

+これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 -
-

メモ: scaleY(sy) は scale(1, sy) または scale3d(1, sy, 1) と等価です。

+> **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 +> +> `transform: rotateX(180deg);`  === `transform: scaleY(-1);` -

transform: rotateX(180deg);  === transform: scaleY(-1);

-
+## 構文 -

構文

+```css +scaleY(s) +``` -
scaleY(s)
-
+### 値 -

値

- -
-
s
-
{{cssxref("<number>")}} で、要素のそれぞれの点を規則的に適用する拡大縮小係数を表します。
-
+- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
10 0s 1000s0001 1000s0001 10000s0000100001
[1 0 0 s 0 0]
ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
+ 1 0 0 s + + 1 0 0 0 s 0 0 0 1 + + 1 0 0 0 s 0 0 0 1 + + 1 0 0 0 0 s 0 0 0 0 1 0 0 0 0 1 +
[1 0 0 s 0 0]
-

例

+

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="scaled">Scaled</div>
+```html +
Normal
+
Scaled
+``` -

CSS

+### CSS -
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;
 }
-
+``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} -

結果

+## 仕様書 -

{{EmbedLiveSample("Examples", 200, 200)}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- [`scaleX()`]() +- [`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 座標に適用される変倍率を表します。 + + + + + + + + + + + + + + + + + +
ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
+ この変形は三次元空間に適用され、平面で表すことはできません。 + + 1 0 0 0 1 0 0 0 s + + 1 0 0 0 0 1 0 0 0 0 s 0 0 0 0 1 +
+ +

例

+ +### HTML + +```html +
Normal
+
Translated
+
Scaled
+``` + +### 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() --- -
{{CSSRef}}
+{{CSSRef}} -

skew() は CSS 関数で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`skew()`** は [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
+{{EmbedInteractiveExample("pages/css/function-skew.html")}} - +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。 -

この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。

+それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 -

それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

+## 構文 -

構文

+`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。 -

skew() で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。1つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。

+```css +skew(ax) -
skew(ax)
+skew(ax, ay)
+```
 
-skew(ax, ay)
-
+### 値 -

値

- -
-
ax
-
{{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。
-
ay
-
{{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は 0 となり、水平方向にのみゆがめます。
-
+- `ax` + - : {{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。 +- `ay` + - : {{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `0` となり、水平方向にのみゆがめます。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ 1 tan + ( + ax + ) + tan + ( + ay + ) 1 + + 1 tan + ( + ax + ) 0 tan + ( + ay + ) 1 0 0 0 1 + + 1 tan + ( + ax + ) 0 tan + ( + ay + ) 1 0 0 0 1 + + 1 tan + ( + ax + ) 0 0 tan + ( + ay + ) 1 0 0 0 0 1 0 0 0 0 1 +
[1 tan(ay) tan(ax) 1 0 0]
-

例

+## 例 -

X 軸のみの変形

+

X 軸のみの変形

-

HTML

+#### HTML -
<div>Normal</div>
-<div class="skewed">Skewed</div>
+```html +
Normal
+
Skewed
+``` -

CSS

+#### CSS -
body {
+```css
+body {
   margin: 20px;
 }
 
@@ -86,22 +190,25 @@ div {
   transform: skew(10deg); /* Equal to skewX(10deg) */
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}}

+{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}} -

両方の軸の変形

+

両方の軸の変形

-

HTML

+#### HTML -
<div>Normal</div>
-<div class="skewed">Skewed</div>
+```html +
Normal
+
Skewed
+``` -

CSS

+#### CSS -
body {
+```css
+body {
   margin: 20px;
 }
 
@@ -115,40 +222,23 @@ div {
   transform: skew(10deg, 10deg);
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}}

+{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • skewX()
    • -
  • skewY()
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

skewX() は CSS 関数で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`skewX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
{{EmbedInteractiveExample("pages/css/function-skewX.html")}}
+{{EmbedInteractiveExample("pages/css/function-skewX.html")}} - +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 -

この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

+> **Note:** `skewX(a)` は `skew(a)` と等価です。 -
-

注: skewX(a) は skew(a) と等価です。

-
+## 構文 -

構文

+```css +skewX(a) +``` -
skewX(a)
-
+### 値 -

値

- -
-
a
-
{{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。
-
+- `a` + - : {{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001
[1 0 tan(a) 1 0 0]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ 1 tan + ( + a + ) + 0 1 + + 1 tan + ( + a + ) 0 0 1 0 0 0 1 + + 1 tan + ( + a + ) 0 0 1 0 0 0 1 + + 1 tan + ( + a + ) 0 0 0 1 0 0 0 0 1 0 0 0 0 1 +
[1 0 tan(a) 1 0 0]
-

例

+

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="skewed">Skewed</div>
+```html +
Normal
+
Skewed
+``` -

CSS

+### CSS -
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;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 200, 200)}}

+{{EmbedLiveSample("Examples", 200, 200)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

skewY() は CSS 関数で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`skewY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 -
{{EmbedInteractiveExample("pages/css/function-skewY.html")}}
+{{EmbedInteractiveExample("pages/css/function-skewY.html")}} - +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 -

この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

+## 構文 -

構文

+```css +skewY(a) +``` -
skewY(a)
-
+### 値 -

値

- -
-
a
-
{{cssxref("<angle>")}} で、縦座標方向にゆがめるのに使用する角度を表します。
-
+- `a` + - : {{cssxref("<angle>")}} で、縦座標方向にゆがめるのに使用する角度を表します。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001
[1 tan(a) 0 1 0 0]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ 1 0 tan + ( + a + ) 1 + + 1 0 0 tan + ( + a + ) 1 0 0 0 1 + + 1 0 0 tan + ( + a + ) 1 0 0 0 1 + + 1 0 0 0 tan + ( + a + ) 1 0 0 0 0 1 0 0 0 0 1 +
[1 tan(a) 0 1 0 0]
-

例

+

例

-

HTML

+### HTML -
<div>Normal</div>
-<div class="skewed">Skewed</div>
+```html +
Normal
+
Skewed
+``` -

CSS

+### CSS -
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;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 200, 200)}}

+{{EmbedLiveSample("Examples", 200, 200)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

translate() は CSS の関数は、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 -

+![](translate.png) -

この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が動くかの座標を定義します。

+この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。 -

構文

+## 構文 -
/* 単一の <length-percentage> 値 */
+```css
+/* 単一の  値 */
 transform: translate(200px);
 transform: translate(50%);
 
-/* 二つの <length-percentage> 値 */
+/* 二つの  値 */
 transform: translate(100px, 200px);
 transform: translate(100px, 50%);
 transform: translate(30%, 200px);
 transform: translate(30%, 50%);
-
+``` -

値

+### 値 -
-
単一の <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つ目にパーセント値が使用された場合は、高さからの相対値です。
-
+- 単一の `` values + - : この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2)` は `translate(2, 0)` と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。 +- 二つの `` 値 + - : この値は 2 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
-

ℝ2 では線形変換ではないので、デカルト座標の行列で表すことはできない。

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+

+ ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

+ 		+ 1 0 tx 0 1 ty 0 0 1 + + 1 0 tx 0 1 ty 0 0 1 + + 1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1 +
[1 0 0 1 tx ty]
-

形式文法

+### 形式文法 -
translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?)
-
+```css +translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) +``` -

例

+## 例 -

単一軸を使用した変形

+

単一軸を使用した変形

-

HTML

+#### HTML -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
+```html +
Static
+
Moved
+
Static
+``` -

CSS

+#### CSS -
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;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

+{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} -

Y 軸と X 軸の変換の組み合わせ

+

Y 軸と X 軸の変換の組み合わせ

-

HTML

+#### HTML -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
+```html +
Static
+
Moved
+
Static
+``` -

CSS

+#### CSS -
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;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

+{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

translate3d() は CSS の関数で、要素を 3D 空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。

+**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 -
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} - +この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。 -

この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。

+## 構文 -

構文

+```css +translate3d(tx, ty, tz) +``` -
translate3d(tx, ty, tz)
-
+### 値 -

値

- -
-
tx
-
変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。
-
ty
-
変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。
-
tz
-
変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む変換は無効とされます。
-
+- `tx` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `ty` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `tz` + - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
-

ℝ2 では線形変換ではないので、デカルト座標の行列で表すことはできない。

- 		ℝ3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 100tx010ty001tz0001
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+

+ ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

+ 		+ ℝ^3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + + 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 +
-

例

+## 例 -

単一軸を使用した変換

+

単一軸の座標変換の使用

-

HTML

+#### HTML -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
+```html +
Static
+
Moved
+
Static
+``` -

CSS

+#### CSS -
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;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

+{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}} -

z 軸と x 軸を組み合わせた変換

+

z 軸と x 軸を組み合わせた座標変換

-

HTML

+#### HTML -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
+```html +
Static
+
Moved
+
Static
+``` -

CSS

+#### CSS -
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;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

+{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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 --- -
{{CSSRef}}
+{{CSSRef}} -

translateX() は CSS のfunctionで、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 -

+![](transform-functions-translatex_2.png) -
-

注: translateX(tx) は translate(tx, 0) または translate3d(tx, 0, 0) と等価です。

-
+> **Note:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。 -

構文

+## 構文 -
/* <length-percentage> values */
+```css
+/*  values */
 transform: translateX(200px);
 transform: translateX(50%);
-
+``` -

値

+### 値 -
-
<length-percentage>
-
変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。
-
+- `` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
-

ℝ2 では線形変換ではないので、デカルト座標の行列で表すことはできない。

- 		10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+

+ ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

+ 		+ 1 0 t 0 1 0 0 0 1 + + 1 0 t 0 1 0 0 0 1 + + 1 0 0 t 0 1 0 0 0 0 1 0 0 0 0 1 +
[1 0 0 1 t 0]
-

形式文法

+### 形式文法 -
translateX({{cssxref("<length-percentage>")}})
-
+```css +translateX({{cssxref("<length-percentage>")}}) +``` -

例

+

例

-

HTML

+### HTML -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
+```html +
Static
+
Moved
+
Static
+``` -

CSS

+### CSS -
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;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 250, 250)}}

+{{EmbedLiveSample("Examples", 250, 250)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- [`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() --- -
{{CSSRef}}
+{{CSSRef}} -

translateX() は CSS のfunctionで、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 -

+![](translatey.png) -
-

注: translateX(tx) は translate(tx, 0) または translate3d(tx, 0, 0) と等価です。

-
+> **Note:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。 -

構文

+## 構文 -
/* <length-percentage> values */
-transform: translateX(200px);
-transform: translateX(50%);
-
+```css +/* 値 */ +transform: translateY(200px); +transform: translateY(50%); +``` -

値

+### 値 -
-
<length-percentage>
-
変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。
-
+- `` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
-

ℝ2 では線形変換ではないので、デカルト座標の行列で表すことはできない。

- 		10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+

+ ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

+ 		+ 1 + 0 + 0 0 + 1 + t 0 + 0 + 1 + + 1 + 0 + 0 0 + 1 + t 0 + 0 + 1 + + 1 + 0 + 0 + 0 0 + 1 + 0 + t 0 + 0 + 1 + 0 0 + 0 + 0 + 1 +
[1 0 0 1 0 t]
-

例

+### 形式文法 -

HTML

+```css +translateY({{cssxref("<length-percentage>")}}) +``` -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
+

例

-

CSS

+### HTML -
div {
+```html
+
Static

+
Moved

+
Static

+```
+
+### CSS
+
+```css
+div {
   width: 60px;
   height: 60px;
   background-color: skyblue;
 }
 
 .moved {
-  transform: translateX(10px); /* translate(10px) と等価 */
+  transform: translateY(10px);
   background-color: pink;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 250, 250)}}

+{{EmbedLiveSample("Examples", 250, 250)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{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() --- -
{{CSSRef}}
+{{CSSRef}} -

translateZ() CSS 関数は、3 次元空間の z 軸に沿って、すなわちビューアーに近づくまたは遠ざかって、要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。

+**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 -
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} - +この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 -

この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。

+上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 -

上記のデモでは、 perspective: 550px; (3D空間を作成するため) と transform-style. preserve-3d; (従って、子つまり立方体の6辺も3D空間に配置されています) が、立方体に設定されています。

+> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 -
-

注: translateZ(tz) は、translate3d(0, 0, tz) と等価です。

-
+## 構文 -

構文

+```css +translateZ(tz) +``` -
translateZ(tz)
-
+### 値 -

値

- -
-
tz
-
変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素がビューアーに向かって移動し、負の値で移動すると遠ざかります。
-
+- `tz` + - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変換は 3 次元空間に適用されます。平面上では表現できません。この変換は ℝ3 の線形変換ではなく、デカルト座標系の行列では表現できません。 10000100001t0001
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変換は 3 次元空間に適用されます。平面上では表現できません。 + + この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 + + 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 +
-

例

+

例

-

この例では、2 つのボックスが作成されます。 1 つは通常変換されずにページ上に配置されます。 2 番目の方法は、3D 空間を作成するためのパースペクティブを適用して変更し、ユーザーに向かって移動します。

+この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 -

HTML

+### HTML -
<div>Static</div>
-<div class="moved">Moved</div>
+```html +
Static
+
Moved
+``` -

CSS

+### CSS -
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;
 }
-
+``` -

本当にここで重要なのは、class "moved" です。それが何をするかを見てみましょう。 まず、perspective() 関数は、ビューアーを、z=0 (本質的にスクリーンの表面) にある平面に対してビューアーを配置します。500px の値は、ユーザーが z=0 にある画像の「正面」に 500 ピクセルあることを意味します。

+ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 +[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 -

次に、translateZ() 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、2D ディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の 3D ディスプレイデバイスを使用して見たときに要素をより近く見せるという効果があります。

+次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 -

なお、 perspective() の値が translateZ() の値よりも小さい場合、例えば transform: perspective(200px) translateZ(300px); の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。

+なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 250, 250)}}

+{{EmbedLiveSample("Examples", 250, 250)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}3D 変換関数を CSS Transforms 標準に追加。
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

<transform-function> データ型の互換性情報をご覧ください。

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
+- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/translation-value/index.md b/files/ja/web/css/translation-value/index.md new file mode 100644 index 0000000000..1976a6bcf7 --- /dev/null +++ b/files/ja/web/css/translation-value/index.md @@ -0,0 +1,153 @@ +--- +title: +slug: Web/CSS/translation-value +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Data Type + - Reference +browser-compat: css.types.transform-function +translation_of: Web/CSS/translation-value +--- +{{CSSRef}} + +**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、特定の座標変換関数 ({{cssxref("transform")}})、たとえば [`translate()`](/ja/docs/Web/CSS/transform-function/translate()), [`translateX()`](/ja/docs/Web/CSS/transform-function/translateX()), [`translateY()`](/ja/docs/Web/CSS/transform-function/translateY()), [`translate3d()`](/ja/docs/Web/CSS/transform-function/translate3d()) の引数で使用されます。 + +## 構文 + +`` データ型は {{Cssxref("<length>")}} 値または {{Cssxref("<percentage>")}} 値のどちらかになります。 + +## 例 + +### 座標変換関数の比較 + +次の例では、DOM 要素と座標変換で作成された 3D 立方体と、立方体を座標変換するための様々な座標変換関数を選択するための選択メニューが用意されており、様々な種類の効果を比較することができます。 + +選択すると、変換が立方体に適用され、2 秒後に立方体は開始時の状態に戻ります。すべての変換の効果を見ることができるように、`transform3d()` を使って立方体の開始状態をわずかに回転させています。 + +#### HTML + +```html +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+ +
+ + +
+
+``` + +#### CSS + +```css +main { + width: 400px; + height: 200px; + padding: 50px; + background-image: linear-gradient(135deg, white, cyan, white); +} + +#example-element { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: transform 1.5s; + transform: rotate3d(1, 1, 1, 30deg); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90,90,90,.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0,210,0,.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210,0,0,.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0,0,210,.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210,210,0,.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210,0,210,.7); + transform: rotateX(-90deg) translateZ(50px); +} + +.select-form { + margin-top: 50px; +} +``` + +#### JavaScript + +```js +const selectElem = document.querySelector('select'); +const example = document.querySelector('#example-element'); + +selectElem.addEventListener('change', () => { + if(selectElem.value === 'Choose a function') { + return; + } else { + example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`; + setTimeout(function() { + example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; + }, 2000) + } +}) +``` + +#### 結果 + +{{EmbedLiveSample('Translation_function_comparison', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} -- cgit v1.2.3-54-g00ecf