From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../web/css/transform-function/matrix()/index.md | 166 ----------- .../ja/web/css/transform-function/matrix/index.md | 167 +++++++++++ .../web/css/transform-function/matrix3d()/index.md | 254 ---------------- .../web/css/transform-function/matrix3d/index.md | 255 ++++++++++++++++ .../css/transform-function/perspective()/index.md | 173 ----------- .../css/transform-function/perspective/index.md | 174 +++++++++++ .../web/css/transform-function/rotate()/index.md | 287 ------------------ .../ja/web/css/transform-function/rotate/index.md | 288 ++++++++++++++++++ .../web/css/transform-function/rotate3d()/index.md | 326 -------------------- .../web/css/transform-function/rotate3d/index.md | 327 +++++++++++++++++++++ .../web/css/transform-function/rotatex()/index.md | 176 ----------- .../ja/web/css/transform-function/rotatex/index.md | 177 +++++++++++ .../web/css/transform-function/rotatey()/index.md | 176 ----------- .../ja/web/css/transform-function/rotatey/index.md | 177 +++++++++++ .../web/css/transform-function/rotatez()/index.md | 172 ----------- .../ja/web/css/transform-function/rotatez/index.md | 173 +++++++++++ .../ja/web/css/transform-function/scale()/index.md | 212 ------------- files/ja/web/css/transform-function/scale/index.md | 213 ++++++++++++++ .../web/css/transform-function/scale3d()/index.md | 171 ----------- .../ja/web/css/transform-function/scale3d/index.md | 172 +++++++++++ .../web/css/transform-function/scalex()/index.md | 164 ----------- .../ja/web/css/transform-function/scalex/index.md | 165 +++++++++++ .../web/css/transform-function/scaley()/index.md | 166 ----------- .../ja/web/css/transform-function/scaley/index.md | 167 +++++++++++ .../web/css/transform-function/scalez()/index.md | 142 --------- .../ja/web/css/transform-function/scalez/index.md | 143 +++++++++ .../ja/web/css/transform-function/skew()/index.md | 244 --------------- files/ja/web/css/transform-function/skew/index.md | 245 +++++++++++++++ .../ja/web/css/transform-function/skewx()/index.md | 182 ------------ files/ja/web/css/transform-function/skewx/index.md | 183 ++++++++++++ .../ja/web/css/transform-function/skewy()/index.md | 177 ----------- .../css/transform-function/translate()/index.md | 199 ------------- .../web/css/transform-function/translate/index.md | 200 +++++++++++++ .../css/transform-function/translate3d()/index.md | 152 ---------- .../css/transform-function/translate3d/index.md | 153 ++++++++++ .../css/transform-function/translatex()/index.md | 163 ---------- .../web/css/transform-function/translatex/index.md | 163 ++++++++++ .../css/transform-function/translatey()/index.md | 174 ----------- .../web/css/transform-function/translatey/index.md | 175 +++++++++++ .../css/transform-function/translatez()/index.md | 129 -------- .../web/css/transform-function/translatez/index.md | 130 ++++++++ 41 files changed, 3847 insertions(+), 4005 deletions(-) delete mode 100644 files/ja/web/css/transform-function/matrix()/index.md create mode 100644 files/ja/web/css/transform-function/matrix/index.md delete mode 100644 files/ja/web/css/transform-function/matrix3d()/index.md create mode 100644 files/ja/web/css/transform-function/matrix3d/index.md delete mode 100644 files/ja/web/css/transform-function/perspective()/index.md create mode 100644 files/ja/web/css/transform-function/perspective/index.md delete mode 100644 files/ja/web/css/transform-function/rotate()/index.md create mode 100644 files/ja/web/css/transform-function/rotate/index.md delete mode 100644 files/ja/web/css/transform-function/rotate3d()/index.md create mode 100644 files/ja/web/css/transform-function/rotate3d/index.md delete mode 100644 files/ja/web/css/transform-function/rotatex()/index.md create mode 100644 files/ja/web/css/transform-function/rotatex/index.md delete mode 100644 files/ja/web/css/transform-function/rotatey()/index.md create mode 100644 files/ja/web/css/transform-function/rotatey/index.md delete mode 100644 files/ja/web/css/transform-function/rotatez()/index.md create mode 100644 files/ja/web/css/transform-function/rotatez/index.md delete mode 100644 files/ja/web/css/transform-function/scale()/index.md create mode 100644 files/ja/web/css/transform-function/scale/index.md delete mode 100644 files/ja/web/css/transform-function/scale3d()/index.md create mode 100644 files/ja/web/css/transform-function/scale3d/index.md delete mode 100644 files/ja/web/css/transform-function/scalex()/index.md create mode 100644 files/ja/web/css/transform-function/scalex/index.md delete mode 100644 files/ja/web/css/transform-function/scaley()/index.md create mode 100644 files/ja/web/css/transform-function/scaley/index.md delete mode 100644 files/ja/web/css/transform-function/scalez()/index.md create mode 100644 files/ja/web/css/transform-function/scalez/index.md delete mode 100644 files/ja/web/css/transform-function/skew()/index.md create mode 100644 files/ja/web/css/transform-function/skew/index.md delete mode 100644 files/ja/web/css/transform-function/skewx()/index.md create mode 100644 files/ja/web/css/transform-function/skewx/index.md delete mode 100644 files/ja/web/css/transform-function/skewy()/index.md delete mode 100644 files/ja/web/css/transform-function/translate()/index.md create mode 100644 files/ja/web/css/transform-function/translate/index.md delete mode 100644 files/ja/web/css/transform-function/translate3d()/index.md create mode 100644 files/ja/web/css/transform-function/translate3d/index.md delete mode 100644 files/ja/web/css/transform-function/translatex()/index.md create mode 100644 files/ja/web/css/transform-function/translatex/index.md delete mode 100644 files/ja/web/css/transform-function/translatey()/index.md create mode 100644 files/ja/web/css/transform-function/translatey/index.md delete mode 100644 files/ja/web/css/transform-function/translatez()/index.md create mode 100644 files/ja/web/css/transform-function/translatez/index.md (limited to 'files/ja/web/css/transform-function') diff --git a/files/ja/web/css/transform-function/matrix()/index.md b/files/ja/web/css/transform-function/matrix()/index.md deleted file mode 100644 index a522b300fd..0000000000 --- a/files/ja/web/css/transform-function/matrix()/index.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.matrix -translation_of: Web/CSS/transform-function/matrix() ---- -{{CSSRef}} - -**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -> **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 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 - -```css -matrix(a, b, c, d, tx, ty) -``` - -### 値 - -- _a_ _b_ _c_ _d_ - - : {{cssxref("<number>")}} で、線形変換を記述します。 -- _tx_ _ty_ - - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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 -
Normal
-
Changed
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.changed { - transform: matrix(1, 2, -1, 1, 80, 80); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 350, 350)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{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/matrix/index.md b/files/ja/web/css/transform-function/matrix/index.md new file mode 100644 index 0000000000..d01b1fd491 --- /dev/null +++ b/files/ja/web/css/transform-function/matrix/index.md @@ -0,0 +1,167 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +browser-compat: css.types.transform-function.matrix +--- +{{CSSRef}} + +**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +> **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 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 + +```css +matrix(a, b, c, d, tx, ty) +``` + +### 値 + +- _a_ _b_ _c_ _d_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _tx_ _ty_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^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 +
Normal
+
Changed
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.changed { + transform: matrix(1, 2, -1, 1, 80, 80); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 350, 350)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{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 deleted file mode 100644 index f441acebd2..0000000000 --- a/files/ja/web/css/transform-function/matrix3d()/index.md +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: matrix3d() -slug: Web/CSS/transform-function/matrix3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.matrix3d -translation_of: Web/CSS/transform-function/matrix3d() ---- -{{CSSRef}} - -**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 -結果は {{cssxref("<transform-function>")}} データ型になります。 - -## 構文 - -`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 - -```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>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - - - -
ℝ^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()` 変換を適用することができます。 - -#### HTML - -```html -
- 
1
- 
2
- 
3
- 
4
- 
5
- 
6
-
-``` - -#### CSS - -```css -#example-element { - width: 100px; - height: 100px; - transform-style: preserve-3d; - transition: transform 1.5s; - transform: rotate3d(1, 1, 1, 30deg); - margin: 50px auto; -} - -#example-element:hover, #example-element:focus { - transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); -} - -.face { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - position: absolute; - backface-visibility: inherit; - font-size: 60px; - color: #fff; -} - -.front { - background: rgba(90,90,90,.7); - transform: translateZ(50px); -} - -.back { - background: rgba(0,210,0,.7); - transform: rotateY(180deg) translateZ(50px); -} - -.right { - background: rgba(210,0,0,.7); - transform: rotateY(90deg) translateZ(50px); -} - -.left { - background: rgba(0,0,210,.7); - transform: rotateY(-90deg) translateZ(50px); -} - -.top { - background: rgba(210,210,0,.7); - transform: rotateX(90deg) translateZ(50px); -} - -.bottom { - background: rgba(210,0,210,.7); - transform: rotateX(-90deg) translateZ(50px); -} -``` - -#### 結果 - -{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} - -### 行列変換と拡大縮小の例 - -もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 - -#### HTML - -```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? -
-``` - -#### CSS - -```css -html { -  width: 100%; -} -body { -  height: 100vh; -  /* Centering content */ -  display: flex; -  flex-flow: row wrap; -  justify-content: center; -  align-content: center; - -} -.foo { -  width: 50%; -  padding: 1em; -  color: white; -  background: #ff8c66; -  border: 2px dashed black; -  text-align: center; -  font-family: system-ui, sans-serif; -  font-size: 14px; -   /* Setting up animation for better demonstration */ -  animation: MotionScale 2s alternate linear infinite; -} - -@keyframes MotionScale { -  from { -    /* -      Identity matrix is used as basis here. -      The matrix below describes the -      following transformations: -        Translates every X point by -50px -        Translates every Y point by -100px -        Translates every Z point by 0 -        Scales down by 10% -    */ -    transform: matrix3d( -      1,0,0,0, -      0,1,0,0, -      0,0,1,0, -      -50,-100,0,1.1 -    ); - -  } -  50% { -    transform: matrix3d( -      1,0,0,0, -      0,1,0,0, -      0,0,1,0, -      0,0,0,0.9 -    ); -  } -  to { -     transform: matrix3d( -      1,0,0,0, -      0,1,0,0, -      0,0,1,0, -      50,100,0,1.1 -    ) -  } -} -``` - -#### 結果 - -{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{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/matrix3d/index.md b/files/ja/web/css/transform-function/matrix3d/index.md new file mode 100644 index 0000000000..b3d1168891 --- /dev/null +++ b/files/ja/web/css/transform-function/matrix3d/index.md @@ -0,0 +1,255 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/matrix3d() +original_slug: Web/CSS/transform-function/matrix3d() +browser-compat: css.types.transform-function.matrix3d +--- +{{CSSRef}} + +**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 +結果は {{cssxref("<transform-function>")}} データ型になります。 + +## 構文 + +`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 + +```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>")}} で、適用する変換を記述します。 + + + + + + + + + + + + + + + + + +
ℝ^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()` 変換を適用することができます。 + +#### HTML + +```html +
+ 
1
+ 
2
+ 
3
+ 
4
+ 
5
+ 
6
+
+``` + +#### CSS + +```css +#example-element { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: transform 1.5s; + transform: rotate3d(1, 1, 1, 30deg); + margin: 50px auto; +} + +#example-element:hover, #example-element:focus { + transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90,90,90,.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0,210,0,.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210,0,0,.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0,0,210,.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210,210,0,.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210,0,210,.7); + transform: rotateX(-90deg) translateZ(50px); +} +``` + +#### 結果 + +{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} + +### 行列変換と拡大縮小の例 + +もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 + +#### HTML + +```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? +
+``` + +#### CSS + +```css +html { +  width: 100%; +} +body { +  height: 100vh; +  /* Centering content */ +  display: flex; +  flex-flow: row wrap; +  justify-content: center; +  align-content: center; + +} +.foo { +  width: 50%; +  padding: 1em; +  color: white; +  background: #ff8c66; +  border: 2px dashed black; +  text-align: center; +  font-family: system-ui, sans-serif; +  font-size: 14px; +   /* Setting up animation for better demonstration */ +  animation: MotionScale 2s alternate linear infinite; +} + +@keyframes MotionScale { +  from { +    /* +      Identity matrix is used as basis here. +      The matrix below describes the +      following transformations: +        Translates every X point by -50px +        Translates every Y point by -100px +        Translates every Z point by 0 +        Scales down by 10% +    */ +    transform: matrix3d( +      1,0,0,0, +      0,1,0,0, +      0,0,1,0, +      -50,-100,0,1.1 +    ); + +  } +  50% { +    transform: matrix3d( +      1,0,0,0, +      0,1,0,0, +      0,0,1,0, +      0,0,0,0.9 +    ); +  } +  to { +     transform: matrix3d( +      1,0,0,0, +      0,1,0,0, +      0,0,1,0, +      50,100,0,1.1 +    ) +  } +} +``` + +#### 結果 + +{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{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 deleted file mode 100644 index 3be9e8d15f..0000000000 --- a/files/ja/web/css/transform-function/perspective()/index.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.perspective -translation_of: Web/CSS/transform-function/perspective() ---- -{{CSSRef}} - -**`perspective()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-perspective.html")}} - -`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)` は無限の距離からの遠近感を表し、変形はありません。 - -```css -perspective(d) -``` - -### 値 - -- _d_ - - : {{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。 - - - - - - - - - - - - - - - - - -
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
- この変換は三次元空間に適用され、平面で表現することはできません。 - この変換は ℝ^3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 - 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − - 1 - / - d 1 -
- -

例

- -### 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; -  line-height: 100px; -  font-size: 100px; -  text-align: center; -} - -p + div { -  width: 100px; -  height: 100px; -  transform-style: preserve-3d; -  margin-left: 100px; -} -.no-perspective-box { -  transform: rotateX(-15deg) rotateY(30deg); -} - -.perspective-box-far { -  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); -} - -.perspective-box-closer { -  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); -} - -.top { -  background-color: skyblue; -  transform: rotateX(90deg) translate3d(0, 0, 50px); -} - -.left { -  background-color: pink; -  transform: rotateY(-90deg) translate3d(0, 0, 50px); -} - -.front { -  background-color: limegreen; -  transform: translate3d(0, 0, 50px); -} -``` - -### 結果 - -{{ EmbedLiveSample('Examples', '250', '350') }} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/perspective/index.md b/files/ja/web/css/transform-function/perspective/index.md new file mode 100644 index 0000000000..558dc25a15 --- /dev/null +++ b/files/ja/web/css/transform-function/perspective/index.md @@ -0,0 +1,174 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +browser-compat: css.types.transform-function.perspective +--- +{{CSSRef}} + +**`perspective()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-perspective.html")}} + +`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)` は無限の距離からの遠近感を表し、変形はありません。 + +```css +perspective(d) +``` + +### 値 + +- _d_ + - : {{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。 + + + + + + + + + + + + + + + + + +
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変換は三次元空間に適用され、平面で表現することはできません。 + この変換は ℝ^3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − + 1 + / + d 1 +
+ +

例

+ +### 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; +  line-height: 100px; +  font-size: 100px; +  text-align: center; +} + +p + div { +  width: 100px; +  height: 100px; +  transform-style: preserve-3d; +  margin-left: 100px; +} +.no-perspective-box { +  transform: rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-far { +  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-closer { +  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); +} + +.top { +  background-color: skyblue; +  transform: rotateX(90deg) translate3d(0, 0, 50px); +} + +.left { +  background-color: pink; +  transform: rotateY(-90deg) translate3d(0, 0, 50px); +} + +.front { +  background-color: limegreen; +  transform: translate3d(0, 0, 50px); +} +``` + +### 結果 + +{{ EmbedLiveSample('Examples', '250', '350') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{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 deleted file mode 100644 index 680dadc756..0000000000 --- a/files/ja/web/css/transform-function/rotate()/index.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotate -translation_of: Web/CSS/transform-function/rotate() ---- -{{CSSRef}} - -**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 - -## 構文 - -`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 - -```css -rotate(a) -``` - -### 値 - -- _a_ - - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 - 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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 -
Normal
-
Rotated
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate(45deg); /* rotateZ(45deg) と等価 */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Basic_example", "auto", 180)}} - -

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

- -複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 - -#### HTML - -```html -
Normal
-
Rotated
-
Rotated + Translated
-
Translated + Rotated
-``` - -#### CSS - -```css -div { - position: absolute; - left: 40px; - top: 40px; - width: 100px; - height: 100px; - background-color: lightgray; -} - -.rotate { - background-color: transparent; - outline: 2px dashed; - transform: rotate(45deg); -} - -.rotate-translate { - background-color: pink; - transform: rotate(45deg) translateX(180px); -} - -.translate-rotate { - background-color: gold; - transform: translateX(180px) rotate(45deg); -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/rotate/index.md b/files/ja/web/css/transform-function/rotate/index.md new file mode 100644 index 0000000000..0cd44fab47 --- /dev/null +++ b/files/ja/web/css/transform-function/rotate/index.md @@ -0,0 +1,288 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +browser-compat: css.types.transform-function.rotate +--- +{{CSSRef}} + +**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 + +## 構文 + +`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 + +```css +rotate(a) +``` + +### 値 + +- _a_ + - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 + 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^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 +
Normal
+
Rotated
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate(45deg); /* rotateZ(45deg) と等価 */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Basic_example", "auto", 180)}} + +

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

+ +複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 + +#### HTML + +```html +
Normal
+
Rotated
+
Rotated + Translated
+
Translated + Rotated
+``` + +#### CSS + +```css +div { + position: absolute; + left: 40px; + top: 40px; + width: 100px; + height: 100px; + background-color: lightgray; +} + +.rotate { + background-color: transparent; + outline: 2px dashed; + transform: rotate(45deg); +} + +.rotate-translate { + background-color: pink; + transform: rotate(45deg) translateX(180px); +} + +.translate-rotate { + background-color: gold; + transform: translateX(180px) rotate(45deg); +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{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 deleted file mode 100644 index fd781800d0..0000000000 --- a/files/ja/web/css/transform-function/rotate3d()/index.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotate3d -translation_of: Web/CSS/transform-function/rotate3d() ---- -{{CSSRef}} - -**`rotate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)は、要素を三次元空間内の固定した軸を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/rotate3d.html")}} - -三次元空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[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 座標を表します。 `` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。 - -```css -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>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - - - -
ℝ^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 軸に沿って回転

- -#### HTML - -```html -
Normal
-
Rotated
-``` - -#### CSS - -```css -body { - perspective: 800px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate3d(0, 1, 0, 60deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} - -

独自の軸に沿って回転

- -#### HTML - -```html -
Normal
-
Rotated
-``` - -#### CSS - -```css -body { - perspective: 800px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate3d(1, 2, -1, 192deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotate3d/index.md b/files/ja/web/css/transform-function/rotate3d/index.md new file mode 100644 index 0000000000..c747c1c27c --- /dev/null +++ b/files/ja/web/css/transform-function/rotate3d/index.md @@ -0,0 +1,327 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +browser-compat: css.types.transform-function.rotate3d +--- +{{CSSRef}} + +**`rotate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)は、要素を三次元空間内の固定した軸を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/rotate3d.html")}} + +三次元空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[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 座標を表します。 `` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。 + +```css +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>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + + + +
ℝ^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 軸に沿って回転

+ +#### HTML + +```html +
Normal
+
Rotated
+``` + +#### CSS + +```css +body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(0, 1, 0, 60deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} + +

独自の軸に沿って回転

+ +#### HTML + +```html +
Normal
+
Rotated
+``` + +#### CSS + +```css +body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(1, 2, -1, 192deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index 111f7c1b0f..0000000000 --- a/files/ja/web/css/transform-function/rotatex()/index.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: rotateX() -slug: Web/CSS/transform-function/rotateX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateX -translation_of: Web/CSS/transform-function/rotateX() ---- -{{CSSRef}} - -**`rotateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateX()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateX(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
ℝ^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 -
Normal
-
Rotated
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateX(45deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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 new file mode 100644 index 0000000000..ae003dd8d1 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatex/index.md @@ -0,0 +1,177 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateX() +original_slug: Web/CSS/transform-function/rotateX() +browser-compat: css.types.transform-function.rotateX +--- +{{CSSRef}} + +**`rotateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateX()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateX(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
ℝ^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 +
Normal
+
Rotated
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateX(45deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index 4ca3842ff6..0000000000 --- a/files/ja/web/css/transform-function/rotatey()/index.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: rotateY() -slug: Web/CSS/transform-function/rotateY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateY -translation_of: Web/CSS/transform-function/rotateY() ---- -{{CSSRef}} - -**`rotateY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateY()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateY(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
ℝ^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 -
Normal
-
Rotated
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateY(60deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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 new file mode 100644 index 0000000000..a039fe60a4 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatey/index.md @@ -0,0 +1,177 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateY() +original_slug: Web/CSS/transform-function/rotateY() +browser-compat: css.types.transform-function.rotateY +--- +{{CSSRef}} + +**`rotateY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateY()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateY(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
ℝ^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 +
Normal
+
Rotated
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateY(60deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index e6bc6dffae..0000000000 --- a/files/ja/web/css/transform-function/rotatez()/index.md +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: rotateZ() -slug: Web/CSS/transform-function/rotateZ() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateZ -translation_of: Web/CSS/transform-function/rotateZ() ---- -{{CSSRef}} - -**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateZ(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
ℝ^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 -
Normal
-
Rotated
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateZ(45deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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 new file mode 100644 index 0000000000..04b880f9d2 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatez/index.md @@ -0,0 +1,173 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateZ() +original_slug: Web/CSS/transform-function/rotateZ() +browser-compat: css.types.transform-function.rotateZ +--- +{{CSSRef}} + +**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateZ(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
ℝ^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 +
Normal
+
Rotated
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateZ(45deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index f81c5606b2..0000000000 --- a/files/ja/web/css/transform-function/scale()/index.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scale -translation_of: Web/CSS/transform-function/scale() ---- -{{CSSRef}} - -**`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] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 - -> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`]() 関数を使用してください。 - -## 構文 - -`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。 - -```css -scale(sx) - -scale(sx, sy) -``` - -### 値 - -- `sx` - - : 変倍ベクトルの横座標を表す {{cssxref("<number>")}}。 -- `sy` - - : 変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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]
- -## アクセシビリティの考慮 - -拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 - -また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 - -詳しくは以下の文書を参照してください。 - -- [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) - -## 例 - -

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

- -#### HTML - -```html -
Normal
-
Scaled
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - 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")}} - -

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

- -#### HTML - -```html -
Normal
-
Scaled
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ - transform-origin: left; - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-function/scale3d()", "scale3d()")}} diff --git a/files/ja/web/css/transform-function/scale/index.md b/files/ja/web/css/transform-function/scale/index.md new file mode 100644 index 0000000000..ce639a20d1 --- /dev/null +++ b/files/ja/web/css/transform-function/scale/index.md @@ -0,0 +1,213 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +browser-compat: css.types.transform-function.scale +--- +{{CSSRef}} + +**`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] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 + +> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`]() 関数を使用してください。 + +## 構文 + +`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。 + +```css +scale(sx) + +scale(sx, sy) +``` + +### 値 + +- `sx` + - : 変倍ベクトルの横座標を表す {{cssxref("<number>")}}。 +- `sy` + - : 変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^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]
+ +## アクセシビリティの考慮 + +拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 + +また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 + +詳しくは以下の文書を参照してください。 + +- [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) + +## 例 + +

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

+ +#### HTML + +```html +
Normal
+
Scaled
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + 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")}} + +

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

+ +#### HTML + +```html +
Normal
+
Scaled
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ + transform-origin: left; + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index 8a8bec6701..0000000000 --- a/files/ja/web/css/transform-function/scale3d()/index.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -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/scale3d/index.md b/files/ja/web/css/transform-function/scale3d/index.md new file mode 100644 index 0000000000..38937f183f --- /dev/null +++ b/files/ja/web/css/transform-function/scale3d/index.md @@ -0,0 +1,172 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scale3d() +original_slug: Web/CSS/transform-function/scale3d() +browser-compat: css.types.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 deleted file mode 100644 index 231094820a..0000000000 --- a/files/ja/web/css/transform-function/scalex()/index.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -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}} - -**`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<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)` と等価です。 - -## 構文 - -```css -scaleX(s) -``` - -### 値 - -- `s` - - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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]
- -

例

- -### HTML - -```html -
Normal
-
Scaled
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleX(0.6); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples","200","200")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scaleY()`]() -- [`scaleZ()`]() -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scalex/index.md b/files/ja/web/css/transform-function/scalex/index.md new file mode 100644 index 0000000000..c1652028ce --- /dev/null +++ b/files/ja/web/css/transform-function/scalex/index.md @@ -0,0 +1,165 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scaleX() +original_slug: Web/CSS/transform-function/scaleX() +browser-compat: css.types.transform-function.scaleX +--- +{{CSSRef}} + +**`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<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)` と等価です。 + +## 構文 + +```css +scaleX(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^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]
+ +

例

+ +### HTML + +```html +
Normal
+
Scaled
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleX(0.6); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples","200","200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`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 deleted file mode 100644 index 14ffbff444..0000000000 --- a/files/ja/web/css/transform-function/scaley()/index.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: scaleY() -slug: Web/CSS/transform-function/scaleY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scaleY -translation_of: Web/CSS/transform-function/scaleY() ---- -{{CSSRef}} - -**`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](scaley.png) - -これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 - -> **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 -> -> `transform: rotateX(180deg);`  === `transform: scaleY(-1);` - -## 構文 - -```css -scaleY(s) -``` - -### 値 - -- `s` - - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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 -
Normal
-
Scaled
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleY(0.6); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scaleX()`]() -- [`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 new file mode 100644 index 0000000000..6228d6b18e --- /dev/null +++ b/files/ja/web/css/transform-function/scaley/index.md @@ -0,0 +1,167 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scaleY() +original_slug: Web/CSS/transform-function/scaleY() +browser-compat: css.types.transform-function.scaleY +--- +{{CSSRef}} + +**`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](scaley.png) + +これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 + +> **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 +> +> `transform: rotateX(180deg);`  === `transform: scaleY(-1);` + +## 構文 + +```css +scaleY(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^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 +
Normal
+
Scaled
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleY(0.6); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`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 deleted file mode 100644 index ed78c98b18..0000000000 --- a/files/ja/web/css/transform-function/scalez()/index.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -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/scalez/index.md b/files/ja/web/css/transform-function/scalez/index.md new file mode 100644 index 0000000000..b81aa36b4f --- /dev/null +++ b/files/ja/web/css/transform-function/scalez/index.md @@ -0,0 +1,143 @@ +--- +title: scaleZ() +slug: Web/CSS/transform-function/scaleZ +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +original_slug: Web/CSS/transform-function/scaleZ() +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 deleted file mode 100644 index 826a6e12fc..0000000000 --- a/files/ja/web/css/transform-function/skew()/index.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skew -translation_of: Web/CSS/transform-function/skew() ---- -{{CSSRef}} - -**`skew()`** は [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skew.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。 - -それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -## 構文 - -`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。 - -```css -skew(ax) - -skew(ax, ay) -``` - -### 値 - -- `ax` - - : {{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。 -- `ay` - - : {{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `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 軸のみの変形

- -#### HTML - -```html -
Normal
-
Skewed
-``` - -#### CSS - -```css -body { - margin: 20px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skew(10deg); /* Equal to skewX(10deg) */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}} - -

両方の軸の変形

- -#### HTML - -```html -
Normal
-
Skewed
-``` - -#### CSS - -```css -body { - margin: 20px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skew(10deg, 10deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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/skew/index.md b/files/ja/web/css/transform-function/skew/index.md new file mode 100644 index 0000000000..9c6abb22a0 --- /dev/null +++ b/files/ja/web/css/transform-function/skew/index.md @@ -0,0 +1,245 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +browser-compat: css.types.transform-function.skew +--- +{{CSSRef}} + +**`skew()`** は [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-skew.html")}} + +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。 + +それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 + +## 構文 + +`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。 + +```css +skew(ax) + +skew(ax, ay) +``` + +### 値 + +- `ax` + - : {{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。 +- `ay` + - : {{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `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 軸のみの変形

+ +#### HTML + +```html +
Normal
+
Skewed
+``` + +#### CSS + +```css +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg); /* Equal to skewX(10deg) */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}} + +

両方の軸の変形

+ +#### HTML + +```html +
Normal
+
Skewed
+``` + +#### CSS + +```css +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg, 10deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index 353c7dd058..0000000000 --- a/files/ja/web/css/transform-function/skewx()/index.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: skewX() -slug: Web/CSS/transform-function/skewX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skewX -translation_of: Web/CSS/transform-function/skewX() ---- -{{CSSRef}} - -**`skewX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skewX.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -> **Note:** `skewX(a)` は `skew(a)` と等価です。 - -## 構文 - -```css -skewX(a) -``` - -### 値 - -- `a` - - : {{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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 -
Normal
-
Skewed
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skewX(10deg); /* skew(10deg) と同じ */ - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/skewx/index.md b/files/ja/web/css/transform-function/skewx/index.md new file mode 100644 index 0000000000..aa774cbd9a --- /dev/null +++ b/files/ja/web/css/transform-function/skewx/index.md @@ -0,0 +1,183 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/skewX() +original_slug: Web/CSS/transform-function/skewX() +browser-compat: css.types.transform-function.skewX +--- +{{CSSRef}} + +**`skewX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-skewX.html")}} + +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 + +> **Note:** `skewX(a)` は `skew(a)` と等価です。 + +## 構文 + +```css +skewX(a) +``` + +### 値 + +- `a` + - : {{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^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 +
Normal
+
Skewed
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewX(10deg); /* skew(10deg) と同じ */ + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index 07a978b3f5..0000000000 --- a/files/ja/web/css/transform-function/skewy()/index.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: skewY() -slug: Web/CSS/transform-function/skewY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skewY -translation_of: Web/CSS/transform-function/skewY() ---- -{{CSSRef}} - -**`skewY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skewY.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -## 構文 - -```css -skewY(a) -``` - -### 値 - -- `a` - - : {{cssxref("<angle>")}} で、縦座標方向にゆがめるのに使用する角度を表します。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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 -
Normal
-
Skewed
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skewY(40deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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 deleted file mode 100644 index e3b28bdc1a..0000000000 --- a/files/ja/web/css/transform-function/translate()/index.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translate -translation_of: Web/CSS/transform-function/translate() ---- -{{CSSRef}} - -**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](translate.png) - -この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。 - -## 構文 - -```css -/* 単一の 値 */ -transform: translate(200px); -transform: translate(50%); - -/* 二つの 値 */ -transform: translate(100px, 200px); -transform: translate(100px, 50%); -transform: translate(30%, 200px); -transform: translate(30%, 50%); -``` - -### 値 - -- 単一の `` 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 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

- 		- 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]
- -### 形式文法 - -```css -translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) -``` - -## 例 - -

単一軸を使用した変形

- -#### HTML - -```html -
Static
-
Moved
-
Static
-``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} - -

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

- -#### HTML - -```html -
Static
-
Moved
-
Static
-``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translate(10px, 10px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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 new file mode 100644 index 0000000000..0af964a8c0 --- /dev/null +++ b/files/ja/web/css/transform-function/translate/index.md @@ -0,0 +1,200 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +browser-compat: css.types.transform-function.translate +--- +{{CSSRef}} + +**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](translate.png) + +この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。 + +## 構文 + +```css +/* 単一の 値 */ +transform: translate(200px); +transform: translate(50%); + +/* 二つの 値 */ +transform: translate(100px, 200px); +transform: translate(100px, 50%); +transform: translate(30%, 200px); +transform: translate(30%, 50%); +``` + +### 値 + +- 単一の `` 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 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

+ 		+ 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]
+ +### 形式文法 + +```css +translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) +``` + +## 例 + +

単一軸を使用した変形

+ +#### HTML + +```html +
Static
+
Moved
+
Static
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} + +

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

+ +#### HTML + +```html +
Static
+
Moved
+
Static
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index 0d614fbd1a..0000000000 --- a/files/ja/web/css/transform-function/translate3d()/index.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translate3d -translation_of: Web/CSS/transform-function/translate3d() ---- -{{CSSRef}} - -**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 - -{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} - -この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。 - -## 構文 - -```css -translate3d(tx, ty, tz) -``` - -### 値 - -- `tx` - - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 -- `ty` - - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 -- `tz` - - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 - - - - - - - - - - - - - - - - - -
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
-

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

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

単一軸の座標変換の使用

- -#### HTML - -```html -
Static
-
Moved
-
Static
-``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - /* Equivalent to perspective(500px) translateX(10px) */ - transform: perspective(500px) translate3d(10px, 0, 0px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}} - -

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

- -#### HTML - -```html -
Static
-
Moved
-
Static
-``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: perspective(500px) translate3d(10px, 0, 100px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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 new file mode 100644 index 0000000000..26bd0785b4 --- /dev/null +++ b/files/ja/web/css/transform-function/translate3d/index.md @@ -0,0 +1,153 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +browser-compat: css.types.transform-function.translate3d +--- +{{CSSRef}} + +**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 + +{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} + +この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。 + +## 構文 + +```css +translate3d(tx, ty, tz) +``` + +### 値 + +- `tx` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `ty` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `tz` + - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 + + + + + + + + + + + + + + + + + +
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+

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

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

単一軸の座標変換の使用

+ +#### HTML + +```html +
Static
+
Moved
+
Static
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + /* Equivalent to perspective(500px) translateX(10px) */ + transform: perspective(500px) translate3d(10px, 0, 0px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}} + +

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

+ +#### HTML + +```html +
Static
+
Moved
+
Static
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translate3d(10px, 0, 100px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index 1d0797b735..0000000000 --- a/files/ja/web/css/transform-function/translatex()/index.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: translateX() -slug: Web/CSS/transform-function/translateX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateX -translation_of: Web/CSS/transform-function/translateX() -original_slug: Web/CSS/transform-function/translateX ---- -{{CSSRef}} - -**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](transform-functions-translatex_2.png) - -> **Note:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。 - -## 構文 - -```css -/* values */ -transform: translateX(200px); -transform: translateX(50%); -``` - -### 値 - -- `` - - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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]
- -### 形式文法 - -```css -translateX({{cssxref("<length-percentage>")}}) -``` - -

例

- -### HTML - -```html -
Static
-
Moved
-
Static
-``` - -### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateX(10px); /* translate(10px) と等価 */ - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`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/translatex/index.md b/files/ja/web/css/transform-function/translatex/index.md new file mode 100644 index 0000000000..011503864b --- /dev/null +++ b/files/ja/web/css/transform-function/translatex/index.md @@ -0,0 +1,163 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateX() +original_slug: Web/CSS/transform-function/translateX() +browser-compat: css.types.transform-function.translateX +--- +{{CSSRef}} + +**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](transform-functions-translatex_2.png) + +> **Note:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。 + +## 構文 + +```css +/* values */ +transform: translateX(200px); +transform: translateX(50%); +``` + +### 値 + +- `` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^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]
+ +### 形式文法 + +```css +translateX({{cssxref("<length-percentage>")}}) +``` + +

例

+ +### HTML + +```html +
Static
+
Moved
+
Static
+``` + +### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* translate(10px) と等価 */ + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`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 deleted file mode 100644 index ef8f624a29..0000000000 --- a/files/ja/web/css/transform-function/translatey()/index.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateY -translation_of: Web/CSS/transform-function/translateY() ---- -{{CSSRef}} - -**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](translatey.png) - -> **Note:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。 - -## 構文 - -```css -/* 値 */ -transform: translateY(200px); -transform: translateY(50%); -``` - -### 値 - -- `` - - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 - - - - - - - - - - - - - - - - - - - - - -
ℝ^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]
- -### 形式文法 - -```css -translateY({{cssxref("<length-percentage>")}}) -``` - -

例

- -### HTML - -```html -
Static
-
Moved
-
Static
-``` - -### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateY(10px); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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 new file mode 100644 index 0000000000..6f49e8dacf --- /dev/null +++ b/files/ja/web/css/transform-function/translatey/index.md @@ -0,0 +1,175 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +browser-compat: css.types.transform-function.translateY +--- +{{CSSRef}} + +**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](translatey.png) + +> **Note:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。 + +## 構文 + +```css +/* 値 */ +transform: translateY(200px); +transform: translateY(50%); +``` + +### 値 + +- `` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^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]
+ +### 形式文法 + +```css +translateY({{cssxref("<length-percentage>")}}) +``` + +

例

+ +### HTML + +```html +
Static
+
Moved
+
Static
+``` + +### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(10px); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{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 deleted file mode 100644 index 400c67a02f..0000000000 --- a/files/ja/web/css/transform-function/translatez()/index.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateZ -translation_of: Web/CSS/transform-function/translateZ() ---- -{{CSSRef}} - -**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 - -{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} - -この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 - -上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 - -> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 - -## 構文 - -```css -translateZ(tz) -``` - -### 値 - -- `tz` - - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 - - - - - - - - - - - - - - - - - -
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
- この変換は 3 次元空間に適用されます。平面上では表現できません。 - - この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 - - 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 -
- -

例

- -この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 - -### HTML - -```html -
Static
-
Moved
-``` - -### CSS - -```css -div { - position: relative; - width: 60px; - height: 60px; - left: 100px; - background-color: skyblue; -} - -.moved { - transform: perspective(500px) translateZ(200px); - background-color: pink; -} -``` - -ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 -[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 - -次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 - -なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{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 new file mode 100644 index 0000000000..e0a1df5c9d --- /dev/null +++ b/files/ja/web/css/transform-function/translatez/index.md @@ -0,0 +1,130 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +tags: + - 3D + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +browser-compat: css.types.transform-function.translateZ +--- +{{CSSRef}} + +**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 + +{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} + +この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 + +上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 + +> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 + +## 構文 + +```css +translateZ(tz) +``` + +### 値 + +- `tz` + - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 + + + + + + + + + + + + + + + + + +
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変換は 3 次元空間に適用されます。平面上では表現できません。 + + この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 + + 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 +
+ +

例

+ +この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 + +### HTML + +```html +
Static
+
Moved
+``` + +### CSS + +```css +div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translateZ(200px); + background-color: pink; +} +``` + +ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 +[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 + +次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 + +なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} -- cgit v1.2.3-54-g00ecf