From 3c18a8fbac3cbd3c3ff0d9719292131c8bd3c8cb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 22:56:20 +0900 Subject: transform-function の座標変換関数を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/transform-function/matrix()/index.html | 113 ---------- .../web/css/transform-function/matrix()/index.md | 113 ++++++++++ .../css/transform-function/matrix3d()/index.html | 240 --------------------- .../web/css/transform-function/matrix3d()/index.md | 240 +++++++++++++++++++++ .../transform-function/perspective()/index.html | 158 -------------- .../css/transform-function/perspective()/index.md | 158 ++++++++++++++ .../web/css/transform-function/rotate()/index.html | 153 ------------- .../web/css/transform-function/rotate()/index.md | 153 +++++++++++++ .../css/transform-function/rotate3d()/index.html | 153 ------------- .../web/css/transform-function/rotate3d()/index.md | 153 +++++++++++++ .../css/transform-function/rotatex()/index.html | 114 ---------- .../web/css/transform-function/rotatex()/index.md | 114 ++++++++++ .../css/transform-function/rotatey()/index.html | 114 ---------- .../web/css/transform-function/rotatey()/index.md | 114 ++++++++++ .../css/transform-function/rotatez()/index.html | 114 ---------- .../web/css/transform-function/rotatez()/index.md | 114 ++++++++++ .../web/css/transform-function/scale()/index.html | 158 -------------- .../ja/web/css/transform-function/scale()/index.md | 158 ++++++++++++++ .../web/css/transform-function/scalex()/index.html | 116 ---------- .../web/css/transform-function/scalex()/index.md | 116 ++++++++++ .../web/css/transform-function/scaley()/index.html | 93 -------- .../web/css/transform-function/scaley()/index.md | 93 ++++++++ .../web/css/transform-function/skew()/index.html | 154 ------------- .../ja/web/css/transform-function/skew()/index.md | 154 +++++++++++++ .../web/css/transform-function/skewx()/index.html | 113 ---------- .../ja/web/css/transform-function/skewx()/index.md | 113 ++++++++++ .../web/css/transform-function/skewy()/index.html | 109 ---------- .../ja/web/css/transform-function/skewy()/index.md | 109 ++++++++++ .../css/transform-function/translate()/index.html | 153 ------------- .../css/transform-function/translate()/index.md | 153 +++++++++++++ .../transform-function/translate3d()/index.html | 141 ------------ .../css/transform-function/translate3d()/index.md | 141 ++++++++++++ .../css/transform-function/translatey()/index.html | 114 ---------- .../css/transform-function/translatey()/index.md | 114 ++++++++++ .../css/transform-function/translatez()/index.html | 122 ----------- .../css/transform-function/translatez()/index.md | 122 +++++++++++ 36 files changed, 2432 insertions(+), 2432 deletions(-) delete mode 100644 files/ja/web/css/transform-function/matrix()/index.html create mode 100644 files/ja/web/css/transform-function/matrix()/index.md delete mode 100644 files/ja/web/css/transform-function/matrix3d()/index.html create mode 100644 files/ja/web/css/transform-function/matrix3d()/index.md delete mode 100644 files/ja/web/css/transform-function/perspective()/index.html create mode 100644 files/ja/web/css/transform-function/perspective()/index.md delete mode 100644 files/ja/web/css/transform-function/rotate()/index.html create mode 100644 files/ja/web/css/transform-function/rotate()/index.md delete mode 100644 files/ja/web/css/transform-function/rotate3d()/index.html create mode 100644 files/ja/web/css/transform-function/rotate3d()/index.md delete mode 100644 files/ja/web/css/transform-function/rotatex()/index.html create mode 100644 files/ja/web/css/transform-function/rotatex()/index.md delete mode 100644 files/ja/web/css/transform-function/rotatey()/index.html create mode 100644 files/ja/web/css/transform-function/rotatey()/index.md delete mode 100644 files/ja/web/css/transform-function/rotatez()/index.html create mode 100644 files/ja/web/css/transform-function/rotatez()/index.md delete mode 100644 files/ja/web/css/transform-function/scale()/index.html create mode 100644 files/ja/web/css/transform-function/scale()/index.md delete mode 100644 files/ja/web/css/transform-function/scalex()/index.html create mode 100644 files/ja/web/css/transform-function/scalex()/index.md delete mode 100644 files/ja/web/css/transform-function/scaley()/index.html create mode 100644 files/ja/web/css/transform-function/scaley()/index.md delete mode 100644 files/ja/web/css/transform-function/skew()/index.html create mode 100644 files/ja/web/css/transform-function/skew()/index.md delete mode 100644 files/ja/web/css/transform-function/skewx()/index.html create mode 100644 files/ja/web/css/transform-function/skewx()/index.md delete mode 100644 files/ja/web/css/transform-function/skewy()/index.html create mode 100644 files/ja/web/css/transform-function/skewy()/index.md delete mode 100644 files/ja/web/css/transform-function/translate()/index.html create mode 100644 files/ja/web/css/transform-function/translate()/index.md delete mode 100644 files/ja/web/css/transform-function/translate3d()/index.html create mode 100644 files/ja/web/css/transform-function/translate3d()/index.md delete mode 100644 files/ja/web/css/transform-function/translatey()/index.html create mode 100644 files/ja/web/css/transform-function/translatey()/index.md delete mode 100644 files/ja/web/css/transform-function/translatez()/index.html create mode 100644 files/ja/web/css/transform-function/translatez()/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/transform-function/matrix()/index.html b/files/ja/web/css/transform-function/matrix()/index.html deleted file mode 100644 index 02af2d3f7d..0000000000 --- a/files/ja/web/css/transform-function/matrix()/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -tags: - - CSS - - CSS 変換 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/matrix() ---- -
{{CSSRef}}
- -

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

- -
-

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

-
- -

構文

- -

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

- -
メモ: Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を tx および ty で受け付けていました。
- -
matrix(a, b, c, d, tx, ty)
-
- -

値

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

例

- -

HTML

- -
<div>Normal</div>
-<div class="changed">Changed</div>
- -

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)}}

- -

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

- - 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..02af2d3f7d --- /dev/null +++ b/files/ja/web/css/transform-function/matrix()/index.md @@ -0,0 +1,113 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +tags: + - CSS + - CSS 変換 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/matrix() +--- +
{{CSSRef}}
+ +

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

+ +
+

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

+
+ +

構文

+ +

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

+ +
メモ: Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を tx および ty で受け付けていました。
+ +
matrix(a, b, c, d, tx, ty)
+
+ +

値

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

例

+ +

HTML

+ +
<div>Normal</div>
+<div class="changed">Changed</div>
+ +

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)}}

+ +

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/matrix3d()/index.html b/files/ja/web/css/transform-function/matrix3d()/index.html deleted file mode 100644 index c34354f047..0000000000 --- a/files/ja/web/css/transform-function/matrix3d()/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: matrix3d() -slug: Web/CSS/transform-function/matrix3d() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/matrix3d() ---- -
{{CSSRef}}
- -

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

- -

構文

- -

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

- -
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
- -

値

- -
-
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
-
{{cssxref("<number>")}} で、線形変換を記述します。
-
a4 b4 c4 d4
-
{{cssxref("<number>")}} で、適用する変換を記述します。
-
- -
注: Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を a4, b4, c4 で受け付けていました。
- - - - - - - - - - - - - - - - - -
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変換は三次元空間に適用され、平面で表現することはできません。一般的な三次元アファイン変換は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
- -

例

- -

つぶれる立方体の例

- -

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

- -

HTML

- -
<section id="example-element" tabindex="0">
-  <div class="face front">1</div>
-  <div class="face back">2</div>
-  <div class="face right">3</div>
-  <div class="face left">4</div>
-  <div class="face top">5</div>
-  <div class="face bottom">6</div>
-</section>
-
- -

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

- -
<div class="foo">
-Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
-necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
-</div>
-
- -

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')}}
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..c34354f047 --- /dev/null +++ b/files/ja/web/css/transform-function/matrix3d()/index.md @@ -0,0 +1,240 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/matrix3d() +--- +
{{CSSRef}}
+ +

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

+ +

構文

+ +

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

+ +
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
+ +

値

+ +
+
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
+
{{cssxref("<number>")}} で、線形変換を記述します。
+
a4 b4 c4 d4
+
{{cssxref("<number>")}} で、適用する変換を記述します。
+
+ +
注: Firefox 16 までは、 Gecko は {{cssxref("<length>")}} 値を a4, b4, c4 で受け付けていました。
+ + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変換は三次元空間に適用され、平面で表現することはできません。一般的な三次元アファイン変換は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
+ +

例

+ +

つぶれる立方体の例

+ +

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

+ +

HTML

+ +
<section id="example-element" tabindex="0">
+  <div class="face front">1</div>
+  <div class="face back">2</div>
+  <div class="face right">3</div>
+  <div class="face left">4</div>
+  <div class="face top">5</div>
+  <div class="face bottom">6</div>
+</section>
+
+ +

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

+ +
<div class="foo">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
+necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+</div>
+
+ +

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')}}
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/perspective()/index.html b/files/ja/web/css/transform-function/perspective()/index.html deleted file mode 100644 index ba64284843..0000000000 --- a/files/ja/web/css/transform-function/perspective()/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - CSS - - CSS 変換 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/perspective() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
- - - -

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

- -

構文

- -

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

- -
perspective(d)
-
- -

値

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

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

- 		この変換は ℝ3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 10000100001000−1/d1
- -

例

- -

HTML

- -
<p>Without perspective:</p>
-<div class="no-perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>With perspective (9cm):</p>
-<div class="perspective-box-far">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>With perspective (4cm):</p>
-<div class="perspective-box-closer">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
- -

CSS

- -
.face {
-  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') }}

- -

仕様書

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

ブラウザーの互換性

- -

<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..ba64284843 --- /dev/null +++ b/files/ja/web/css/transform-function/perspective()/index.md @@ -0,0 +1,158 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +tags: + - CSS + - CSS 変換 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
+ + + +

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

+ +

構文

+ +

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

+ +
perspective(d)
+
+ +

値

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

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

+ 		この変換は ℝ3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 10000100001000−1/d1
+ +

例

+ +

HTML

+ +
<p>Without perspective:</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>With perspective (9cm):</p>
+<div class="perspective-box-far">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>With perspective (4cm):</p>
+<div class="perspective-box-closer">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

CSS

+ +
.face {
+  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') }}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/rotate()/index.html b/files/ja/web/css/transform-function/rotate()/index.html deleted file mode 100644 index 38d18aca73..0000000000 --- a/files/ja/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS 変換 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/rotate() ---- -
{{CSSRef}}
- -

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

- -

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

- -

構文

- -

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

- -
rotate(a)
-
- -

値

- -
-
a
-
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
-
- - - - - - - - - - - - - - - - - - - - - -
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
- -

例

- -

基本的な例

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* rotateZ(45deg) と等価 */
-  background-color: pink;
-}
-
- -

結果

- -

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

- -

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

- -

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

- -

HTML

- -
<div>Normal</div>
-<div class="rotate">Rotated</div>
-<div class="rotate-translate">Rotated + Translated</div>
-<div class="translate-rotate">Translated + Rotated</div>
-
- -

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)}}

- -

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

- - 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..38d18aca73 --- /dev/null +++ b/files/ja/web/css/transform-function/rotate()/index.md @@ -0,0 +1,153 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +tags: + - CSS + - CSS 変換 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotate() +--- +
{{CSSRef}}
+ +

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

+ +

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

+ +

構文

+ +

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

+ +
rotate(a)
+
+ +

値

+ +
+
a
+
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
+
+ + + + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* rotateZ(45deg) と等価 */
+  background-color: pink;
+}
+
+ +

結果

+ +

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

+ +

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

+ +

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

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotate">Rotated</div>
+<div class="rotate-translate">Rotated + Translated</div>
+<div class="translate-rotate">Translated + Rotated</div>
+
+ +

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)}}

+ +

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/rotate3d()/index.html b/files/ja/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index 9590e855db..0000000000 --- a/files/ja/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - CSS - - CSS Function - - CSS Transforms - - CSS 変形 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/rotate3d() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
- - - -

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

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

構文

- -

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

- -
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))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
ℝℙ3 の同次座標
- -

例

- -

Y 軸に沿って回転

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

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

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

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)}}

- -

仕様書

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

ブラウザーの互換性

- -

<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..9590e855db --- /dev/null +++ b/files/ja/web/css/transform-function/rotate3d()/index.md @@ -0,0 +1,153 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d() +tags: + - CSS + - CSS Function + - CSS Transforms + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotate3d() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
+ + + +

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

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

構文

+ +

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

+ +
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))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
ℝℙ3 の同次座標
+ +

例

+ +

Y 軸に沿って回転

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

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

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

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)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/rotatex()/index.html b/files/ja/web/css/transform-function/rotatex()/index.html deleted file mode 100644 index e7bfbd1d8c..0000000000 --- a/files/ja/web/css/transform-function/rotatex()/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: rotateX() -slug: Web/CSS/transform-function/rotateX() -tags: - - CSS - - CSS Function - - CSS Transforms - - CSS 変形 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/rotateX() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}
- - - -

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

- -
-

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

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

構文

- -

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

- -
rotateX(a)
-
- -

値

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

例

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateX(45deg);
-  background-color: pink;
-}
-
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

<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..e7bfbd1d8c --- /dev/null +++ b/files/ja/web/css/transform-function/rotatex()/index.md @@ -0,0 +1,114 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX() +tags: + - CSS + - CSS Function + - CSS Transforms + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotateX() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}
+ + + +

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

+ +
+

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

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

構文

+ +

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

+ +
rotateX(a)
+
+ +

値

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

例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateX(45deg);
+  background-color: pink;
+}
+
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/rotatey()/index.html b/files/ja/web/css/transform-function/rotatey()/index.html deleted file mode 100644 index f6e15b36a3..0000000000 --- a/files/ja/web/css/transform-function/rotatey()/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: rotateY() -slug: Web/CSS/transform-function/rotateY() -tags: - - CSS - - CSS Function - - CSS Transforms - - CSS 変形 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/rotateY() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}
- - - -

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

- -
-

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

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

構文

- -

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

- -
rotateY(a)
-
- -

値

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

例

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateY(60deg);
-  background-color: pink;
-}
-
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

<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..f6e15b36a3 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatey()/index.md @@ -0,0 +1,114 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY() +tags: + - CSS + - CSS Function + - CSS Transforms + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotateY() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}
+ + + +

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

+ +
+

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

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

構文

+ +

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

+ +
rotateY(a)
+
+ +

値

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

例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateY(60deg);
+  background-color: pink;
+}
+
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/rotatez()/index.html b/files/ja/web/css/transform-function/rotatez()/index.html deleted file mode 100644 index 5c0618adf5..0000000000 --- a/files/ja/web/css/transform-function/rotatez()/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: rotateZ() -slug: Web/CSS/transform-function/rotateZ() -tags: - - CSS - - CSS Function - - CSS Transforms - - CSS 変形 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/rotateZ() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
- - - -

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

- -
-

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

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

構文

- -

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

- -
rotateZ(a)
-
- -

値

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

例

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateZ(45deg);
-  background-color: pink;
-}
-
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

<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..5c0618adf5 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatez()/index.md @@ -0,0 +1,114 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ() +tags: + - CSS + - CSS Function + - CSS Transforms + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/rotateZ() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
+ + + +

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

+ +
+

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

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

構文

+ +

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

+ +
rotateZ(a)
+
+ +

値

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

例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateZ(45deg);
+  background-color: pink;
+}
+
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/scale()/index.html b/files/ja/web/css/transform-function/scale()/index.html deleted file mode 100644 index e4b78176ec..0000000000 --- a/files/ja/web/css/transform-function/scale()/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - CSS - - CSS 変形 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/scale() ---- -
{{CSSRef}}
- -

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

- -

- -

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

- -

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

- -
メモ: scale() 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 scale3d() 関数を使用してください。
- -

構文

- -

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

- -
scale(sx)
-
-scale(sx, sy)
-
- -

値

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

例

- -

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

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Scaled</div>
- -

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

- -
<div>Normal</div>
-<div class="scaled">Scaled</div>
- -

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;
-}
-
- -

Result

- -

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

- -

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

- -

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

- -

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

- -

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

- - - -

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

- - 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..e4b78176ec --- /dev/null +++ b/files/ja/web/css/transform-function/scale()/index.md @@ -0,0 +1,158 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale() +tags: + - CSS + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

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

+ +

+ +

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

+ +

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

+ +
メモ: scale() 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 scale3d() 関数を使用してください。
+ +

構文

+ +

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

+ +
scale(sx)
+
+scale(sx, sy)
+
+ +

値

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

例

+ +

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

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

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

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

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

Result

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/scalex()/index.html b/files/ja/web/css/transform-function/scalex()/index.html deleted file mode 100644 index 8548b169c4..0000000000 --- a/files/ja/web/css/transform-function/scalex()/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: scaleX() -slug: Web/CSS/transform-function/scaleX() -translation_of: Web/CSS/transform-function/scaleX() ---- -
{{CSSRef}}
- -
CSSのscaleX() 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。
- -
結果は <transform-function> データ型になります。
- -
- -
- -

- -

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

- -
-

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

-
- -

Syntax

- -
scaleX(s)
-
- -

Values

- -
-
s
-
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
- -

Examples

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Scaled</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scaleX(0.6);
-  background-color: pink;
-}
-
- -

Result

- -

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

- -

Specifications

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

Browser compatibility

- - - -

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

- -

See also

- - 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..8548b169c4 --- /dev/null +++ b/files/ja/web/css/transform-function/scalex()/index.md @@ -0,0 +1,116 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX() +translation_of: Web/CSS/transform-function/scaleX() +--- +
{{CSSRef}}
+ +
CSSのscaleX() 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。
+ +
結果は <transform-function> データ型になります。
+ +
+ +
+ +

+ +

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

+ +
+

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

+
+ +

Syntax

+ +
scaleX(s)
+
+ +

Values

+ +
+
s
+
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleX(0.6);
+  background-color: pink;
+}
+
+ +

Result

+ +

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

+ +

Specifications

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

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/ja/web/css/transform-function/scaley()/index.html b/files/ja/web/css/transform-function/scaley()/index.html deleted file mode 100644 index 213942b13c..0000000000 --- a/files/ja/web/css/transform-function/scaley()/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: scaleY() -slug: Web/CSS/transform-function/scaleY() -tags: - - CSS - - CSS 変形 - - CSS 関数 - - リファレンス -translation_of: Web/CSS/transform-function/scaleY() ---- -
{{CSSRef}}
- -

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

- -

- -

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

- -
-

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

- -

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

-
- -

構文

- -
scaleY(s)
-
- -

値

- -
-
s
-
{{cssxref("<number>")}} で、要素のそれぞれの点を規則的に適用する拡大縮小係数を表します。
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
10 0s 1000s0001 1000s0001 10000s0000100001
[1 0 0 s 0 0]
- -

例

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Scaled</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scaleY(0.6);
-  background-color: pink;
-}
-
- -

結果

- -

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

- -

ブラウザーの対応

- -

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

- -

関連情報

- - 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..213942b13c --- /dev/null +++ b/files/ja/web/css/transform-function/scaley()/index.md @@ -0,0 +1,93 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY() +tags: + - CSS + - CSS 変形 + - CSS 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scaleY() +--- +
{{CSSRef}}
+ +

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

+ +

+ +

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

+ +
+

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

+ +

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

+
+ +

構文

+ +
scaleY(s)
+
+ +

値

+ +
+
s
+
{{cssxref("<number>")}} で、要素のそれぞれの点を規則的に適用する拡大縮小係数を表します。
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
10 0s 1000s0001 1000s0001 10000s0000100001
[1 0 0 s 0 0]
+ +

例

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleY(0.6);
+  background-color: pink;
+}
+
+ +

結果

+ +

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

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/skew()/index.html b/files/ja/web/css/transform-function/skew()/index.html deleted file mode 100644 index f99a4a1ea0..0000000000 --- a/files/ja/web/css/transform-function/skew()/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/skew() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
- - - -

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

- -

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

- -

構文

- -

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

- -
skew(ax)
-
-skew(ax, ay)
-
- -

値

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

例

- -

X 軸のみの変形

- -

HTML

- -
<div>Normal</div>
-<div class="skewed">Skewed</div>
- -

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

- -
<div>Normal</div>
-<div class="skewed">Skewed</div>
- -

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)}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..f99a4a1ea0 --- /dev/null +++ b/files/ja/web/css/transform-function/skew()/index.md @@ -0,0 +1,154 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/skew() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
+ + + +

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

+ +

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

+ +

構文

+ +

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

+ +
skew(ax)
+
+skew(ax, ay)
+
+ +

値

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

例

+ +

X 軸のみの変形

+ +

HTML

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

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

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

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)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/skewx()/index.html b/files/ja/web/css/transform-function/skewx()/index.html deleted file mode 100644 index d84043f6ef..0000000000 --- a/files/ja/web/css/transform-function/skewx()/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: skewX() -slug: Web/CSS/transform-function/skewX() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/skewX() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-skewX.html")}}
- - - -

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

- -
-

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

-
- -

構文

- -
skewX(a)
-
- -

値

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

例

- -

HTML

- -
<div>Normal</div>
-<div class="skewed">Skewed</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skewX(10deg); /* Equal to skew(10deg) */
-  background-color: pink;
-}
-
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

<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..d84043f6ef --- /dev/null +++ b/files/ja/web/css/transform-function/skewx()/index.md @@ -0,0 +1,113 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/skewX() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-skewX.html")}}
+ + + +

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

+ +
+

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

+
+ +

構文

+ +
skewX(a)
+
+ +

値

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

例

+ +

HTML

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skewX(10deg); /* Equal to skew(10deg) */
+  background-color: pink;
+}
+
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/skewy()/index.html b/files/ja/web/css/transform-function/skewy()/index.html deleted file mode 100644 index 8d19654b1d..0000000000 --- a/files/ja/web/css/transform-function/skewy()/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: skewY() -slug: Web/CSS/transform-function/skewY() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/skewY() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-skewY.html")}}
- - - -

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

- -

構文

- -
skewY(a)
-
- -

値

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

例

- -

HTML

- -
<div>Normal</div>
-<div class="skewed">Skewed</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skewY(40deg);
-  background-color: pink;
-}
-
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/transform-function/skewy()/index.md b/files/ja/web/css/transform-function/skewy()/index.md new file mode 100644 index 0000000000..8d19654b1d --- /dev/null +++ b/files/ja/web/css/transform-function/skewy()/index.md @@ -0,0 +1,109 @@ +--- +title: skewY() +slug: Web/CSS/transform-function/skewY() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/skewY() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-skewY.html")}}
+ + + +

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

+ +

構文

+ +
skewY(a)
+
+ +

値

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

例

+ +

HTML

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skewY(40deg);
+  background-color: pink;
+}
+
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/translate()/index.html b/files/ja/web/css/transform-function/translate()/index.html deleted file mode 100644 index 01b7d7e801..0000000000 --- a/files/ja/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/translate() ---- -
{{CSSRef}}
- -

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

- -

- -

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

- -

構文

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

値

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

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

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
- -

形式文法

- -
translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?)
-
- -

例

- -

単一軸を使用した変形

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

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

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

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)}}

- -

仕様書

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

ブラウザーの互換性

- -

<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..01b7d7e801 --- /dev/null +++ b/files/ja/web/css/transform-function/translate()/index.md @@ -0,0 +1,153 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translate() +--- +
{{CSSRef}}
+ +

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

+ +

+ +

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

+ +

構文

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

値

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

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

+ 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
+ +

形式文法

+ +
translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?)
+
+ +

例

+ +

単一軸を使用した変形

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

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

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

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)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/translate3d()/index.html b/files/ja/web/css/transform-function/translate3d()/index.html deleted file mode 100644 index 2096870fb1..0000000000 --- a/files/ja/web/css/transform-function/translate3d()/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/translate3d() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
- - - -

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

- -

構文

- -
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 では線形変換ではないので、デカルト座標の行列で表すことはできない。 100tx010ty001tz0001
- -

例

- -

単一軸を使用した変換

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

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

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

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)}}

- -

仕様書

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

ブラウザーの互換性

- -

<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..2096870fb1 --- /dev/null +++ b/files/ja/web/css/transform-function/translate3d()/index.md @@ -0,0 +1,141 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translate3d() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+ + + +

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

+ +

構文

+ +
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 では線形変換ではないので、デカルト座標の行列で表すことはできない。 100tx010ty001tz0001
+ +

例

+ +

単一軸を使用した変換

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

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

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

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)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/translatey()/index.html b/files/ja/web/css/transform-function/translatey()/index.html deleted file mode 100644 index ea004906f7..0000000000 --- a/files/ja/web/css/transform-function/translatey()/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/translateY() ---- -
{{CSSRef}}
- -

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

- -

- -
-

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

-
- -

構文

- -
/* <length-percentage> values */
-transform: translateX(200px);
-transform: translateX(50%);
-
- -

値

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

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

- 		10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]
- -

例

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

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

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

<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..ea004906f7 --- /dev/null +++ b/files/ja/web/css/transform-function/translatey()/index.md @@ -0,0 +1,114 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translateY() +--- +
{{CSSRef}}
+ +

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

+ +

+ +
+

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

+
+ +

構文

+ +
/* <length-percentage> values */
+transform: translateX(200px);
+transform: translateX(50%);
+
+ +

値

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

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

+ 		10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]
+ +

例

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/transform-function/translatez()/index.html b/files/ja/web/css/transform-function/translatez()/index.html deleted file mode 100644 index 75367b6518..0000000000 --- a/files/ja/web/css/transform-function/translatez()/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -translation_of: Web/CSS/transform-function/translateZ() ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
- - - -

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

- -

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

- -
-

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

-
- -

構文

- -
translateZ(tz)
-
- -

値

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

例

- -

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

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
- -

CSS

- -
div {
-  position: relative;
-  width: 60px;
-  height: 60px;
-  left: 100px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translateZ(200px);
-  background-color: pink;
-}
-
- -

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

- -

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

- -

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

- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

<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..75367b6518 --- /dev/null +++ b/files/ja/web/css/transform-function/translatez()/index.md @@ -0,0 +1,122 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ() +tags: + - 3D + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+ + + +

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

+ +

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

+ +
+

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

+
+ +

構文

+ +
translateZ(tz)
+
+ +

値

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

例

+ +

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

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+ +

CSS

+ +
div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+
+ +

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

+ +

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

+ +

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

+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf