From 991da9bf0975e595f7cc584cdf2ea6cb8a14b7ad Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 14 Oct 2021 00:57:05 +0900 Subject: CSS 変換の各ページの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/backface-visibility/index.html | 213 --------- files/ja/web/css/backface-visibility/index.md | 211 +++++++++ files/ja/web/css/css_transforms/index.md | 83 ++-- .../css_transforms/using_css_transforms/index.html | 89 ---- .../css_transforms/using_css_transforms/index.md | 85 ++++ .../css_transforms/using_css_transforms/logo.png | Bin 0 -> 5238 bytes files/ja/web/css/perspective-origin/index.html | 393 ----------------- files/ja/web/css/perspective-origin/index.md | 391 +++++++++++++++++ files/ja/web/css/perspective/index.html | 259 ----------- files/ja/web/css/perspective/index.md | 257 +++++++++++ files/ja/web/css/rotate/index.html | 120 ------ files/ja/web/css/rotate/index.md | 118 +++++ files/ja/web/css/scale/index.html | 132 ------ files/ja/web/css/scale/index.md | 130 ++++++ files/ja/web/css/transform-origin/index.html | 476 --------------------- files/ja/web/css/transform-origin/index.md | 474 ++++++++++++++++++++ files/ja/web/css/transform-style/index.html | 174 -------- files/ja/web/css/transform-style/index.md | 172 ++++++++ files/ja/web/css/transform/index.html | 150 ------- files/ja/web/css/transform/index.md | 148 +++++++ files/ja/web/css/translate/index.html | 119 ------ files/ja/web/css/translate/index.md | 117 +++++ 22 files changed, 2131 insertions(+), 2180 deletions(-) delete mode 100644 files/ja/web/css/backface-visibility/index.html create mode 100644 files/ja/web/css/backface-visibility/index.md delete mode 100644 files/ja/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/ja/web/css/css_transforms/using_css_transforms/index.md create mode 100644 files/ja/web/css/css_transforms/using_css_transforms/logo.png delete mode 100644 files/ja/web/css/perspective-origin/index.html create mode 100644 files/ja/web/css/perspective-origin/index.md delete mode 100644 files/ja/web/css/perspective/index.html create mode 100644 files/ja/web/css/perspective/index.md delete mode 100644 files/ja/web/css/rotate/index.html create mode 100644 files/ja/web/css/rotate/index.md delete mode 100644 files/ja/web/css/scale/index.html create mode 100644 files/ja/web/css/scale/index.md delete mode 100644 files/ja/web/css/transform-origin/index.html create mode 100644 files/ja/web/css/transform-origin/index.md delete mode 100644 files/ja/web/css/transform-style/index.html create mode 100644 files/ja/web/css/transform-style/index.md delete mode 100644 files/ja/web/css/transform/index.html create mode 100644 files/ja/web/css/transform/index.md delete mode 100644 files/ja/web/css/translate/index.html create mode 100644 files/ja/web/css/translate/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/backface-visibility/index.html b/files/ja/web/css/backface-visibility/index.html deleted file mode 100644 index 5a62aec121..0000000000 --- a/files/ja/web/css/backface-visibility/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: backface-visibility -slug: Web/CSS/backface-visibility -tags: - - CSS - - CSS Property - - CSS Transforms - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/backface-visibility ---- -
{{CSSRef}}
- -

backface-visibility は CSS のプロパティで、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。

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

要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転の変換が行われたときに、背面を見ることができます。 (このプロパティは、遠近感を持たない二次元の変換では効果がありません。)

- -

構文

- -
/* キーワード値 */
-backface-visibility: visible;
-backface-visibility: hidden;
-
-/* グローバル値 */
-backface-visibility: inherit;
-backface-visibility: initial;
-backface-visibility: unset;
- -

backface-visibility プロパティは、以下に挙げたキーワードのうちの一つで指定します。

- -

値

- -
-
visible
-
ユーザーに対して裏を向いたとき、背面が可視になります。
-
hidden
-
背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

透明な面と不透明な面を持った立方体

- -

この例は、透明な面と不透明な面を持つ立方体を表示します。

- -

HTML

- -
<table>
-  <tr>
-    <th><code>backface-visibility: visible;</code></th>
-    <th><code>backface-visibility: hidden;</code></th>
-  </tr>
-  <tr>
-    <td>
-      <div class="container">
-        <div class="cube showbf">
-          <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>
-        </div>
-      </div>
-      <p>
-        すべての面が透明であり、
-        裏面 (2, 4, 5) が 表面 (1, 3, 6) を通して表示されます。
-      </p>
-    </td>
-    <td>
-      <div class="container">
-        <div class="cube hidebf">
-          <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>
-        </div>
-      </div>
-      <p>
-        背後の3面 (2, 4, 5) は非表示です。
-      </p>
-    </td>
-  </tr>
-</table>
- -

CSS

- -
/* Classes that will show or hide the
-   three back faces of the "cube" */
-.showbf div {
-  backface-visibility: visible;
-}
-
-.hidebf div {
-  backface-visibility: hidden;
-}
-
-/* コンテナ div、立方体 div、面の一般的な設定 */
-.container {
-  width: 150px;
-  height: 150px;
-  margin: 75px 0 0 75px;
-  border: none;
-}
-
-.cube {
-  width: 100%;
-  height: 100%;
-  perspective: 550px;
-  perspective-origin: 150% 150%;
-  transform-style: preserve-3d;
-}
-
-.face {
-  display: block;
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border: none;
-  line-height: 100px;
-  font-family: sans-serif;
-  font-size: 60px;
-  color: white;
-  text-align: center;
-}
-
-/* 方向に基づいてそれぞれの面を設定 */
-.front {
-  background: rgba(0, 0, 0, 0.3);
-  transform: translateZ(50px);
-}
-
-.back {
-  background: rgba(0, 255, 0, 1);
-  color: black;
-  transform: rotateY(180deg) translateZ(50px);
-}
-
-.right {
-  background: rgba(196, 0, 0, 0.7);
-  transform: rotateY(90deg) translateZ(50px);
-}
-
-.left {
-  background: rgba(0, 0, 196, 0.7);
-  transform: rotateY(-90deg) translateZ(50px);
-}
-
-.top {
-  background: rgba(196, 196, 0, 0.7);
-  transform: rotateX(90deg) translateZ(50px);
-}
-
-.bottom {
-  background: rgba(196, 0, 196, 0.7);
-  transform: rotateX(-90deg) translateZ(50px);
-}
-
-/* テーブルの見栄えをよくする */
-th, p, td {
-  background-color: #EEEEEE;
-  margin: 0px;
-  padding: 6px;
-  font-family: sans-serif;
-  text-align: left;
-}
- -

結果

- -

{{EmbedLiveSample('Cube_with_transparent_and_opaque_faces', '100%', 360)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}{{Spec2('CSS Transforms 2')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.backface-visibility")}}

- -

関連情報

- - diff --git a/files/ja/web/css/backface-visibility/index.md b/files/ja/web/css/backface-visibility/index.md new file mode 100644 index 0000000000..d7d06cb00f --- /dev/null +++ b/files/ja/web/css/backface-visibility/index.md @@ -0,0 +1,211 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - CSS Property + - CSS Transforms + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/backface-visibility +--- +{{CSSRef}} + +**`backface-visibility`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。 + +{{EmbedInteractiveExample("pages/css/backface-visibility.html")}} + + + +要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転の変換が行われたときに、背面を見ることができます。 (このプロパティは、遠近感を持たない二次元の変換では効果がありません。) + +

構文

+ +
/* キーワード値 */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* グローバル値 */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;
+ +`backface-visibility` プロパティは、以下に挙げたキーワードのうちの一つで指定します。 + +

値

+ +- `visible` + - : ユーザーに対して裏を向いたとき、背面が可視になります。 +- `hidden` + - : 背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。 + +

公式定義

+ +{{cssinfo}} + +

形式文法

+ +{{csssyntax}} + +

例

+ +

透明な面と不透明な面を持った立方体

+ +この例は、透明な面と不透明な面を持つ立方体を表示します。 + +

HTML

+ +
<table>
+  <tr>
+    <th><code>backface-visibility: visible;</code></th>
+    <th><code>backface-visibility: hidden;</code></th>
+  </tr>
+  <tr>
+    <td>
+      <div class="container">
+        <div class="cube showbf">
+          <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>
+        </div>
+      </div>
+      <p>
+        すべての面が透明であり、
+        裏面 (2, 4, 5) が 表面 (1, 3, 6) を通して表示されます。
+      </p>
+    </td>
+    <td>
+      <div class="container">
+        <div class="cube hidebf">
+          <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>
+        </div>
+      </div>
+      <p>
+        背後の3面 (2, 4, 5) は非表示です。
+      </p>
+    </td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Classes that will show or hide the
+   three back faces of the "cube" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* コンテナ div、立方体 div、面の一般的な設定 */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* テーブルの見栄えをよくする */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

結果

+ +{{EmbedLiveSample('Cube_with_transparent_and_opaque_faces', '100%', 360)}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}{{Spec2('CSS Transforms 2')}}初回定義
+ +

ブラウザーの互換性

+ +{{Compat("css.properties.backface-visibility")}} + +## 関連情報 + + diff --git a/files/ja/web/css/css_transforms/index.md b/files/ja/web/css/css_transforms/index.md index 55de83ba04..c9cc0fd07a 100644 --- a/files/ja/web/css/css_transforms/index.md +++ b/files/ja/web/css/css_transforms/index.md @@ -1,72 +1,45 @@ --- -title: CSS 変形 +title: CSS 変換 slug: Web/CSS/CSS_Transforms tags: - CSS - - CSS Transforms - - Guide - - Overview + - CSS 変換 + - ガイド + - 概要 - Reference translation_of: Web/CSS/CSS_Transforms --- -
{{CSSRef}}
+{{CSSRef}} -

CSS 変形 (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。

+**CSS 変換** (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変換できるかを定義します。 -

リファレンス

+## リファレンス -

プロパティ

+### プロパティ -
- -
+- {{cssxref("backface-visibility")}} +- {{cssxref("perspective")}} +- {{cssxref("perspective-origin")}} +- {{cssxref("rotate")}} +- {{cssxref("scale")}} +- {{cssxref("transform")}} +- {{cssxref("transform-box")}} +- {{cssxref("transform-origin")}} +- {{cssxref("transform-style")}} +- {{cssxref("translate")}} -

データ型

+## データ型 -
- -
+- {{cssxref("<transform-function>")}} -

ガイド

+## ガイド -
-
CSS 変形の利用
-
CSS でスタイル付けされた要素をどのように変形するかについての手順を追ったチュートリアルです。
-
+- [CSS 変換の利用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) + - : CSS でスタイル付けされた要素をどのように変換するかについての手順を追ったチュートリアルです。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS Transforms 2') }}{{ Spec2('CSS Transforms 2') }}独立した変形を追加。
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}初回定義
+| 仕様書 | 状態 | 備考 | +| ---------------------------------- | ------------------------------- | ------------------ | +| {{ SpecName('CSS Transforms 2') }} | {{ Spec2('CSS Transforms 2') }} | 独立した変換を追加 | +| {{ SpecName('CSS3 Transforms') }} | {{ Spec2('CSS3 Transforms') }} | 初回定義 | diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.html b/files/ja/web/css/css_transforms/using_css_transforms/index.html deleted file mode 100644 index 605a005836..0000000000 --- a/files/ja/web/css/css_transforms/using_css_transforms/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: CSS 変形の使用 -slug: Web/CSS/CSS_Transforms/Using_CSS_transforms -tags: - - 3D - - Advanced - - CSS - - CSS Transforms - - Graphics - - Guide - - Rotate - - Scale - - Scaling - - perspective - - rotation -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms ---- -
{{CSSRef}}
- -

座標空間を編集することで、 CSS 変形 (transform) は通常のフロー処理を混乱させずに、影響下にあるコンテンツの位置を変えることができます。このガイドは変形の使用についての解説を行ないます。

- -

CSS 変形は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変形には回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) が含まれており、二次元と三次元空間の両方の平行移動 (translation) があります。

- -
-

ボックスモデルによって配置された要素のみが transform を実行できます。言うまでもなく、 display: block である要素がボックスモデルで配置されます。

-
- -

CSS 変形のプロパティ

- -

CSS 変形の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。

- -
-
{{cssxref("transform-origin")}}
-
原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変形で使用されれます。
-
{{cssxref("transform")}}
-
要素に適用する変形を指定します。変形の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。
-
- -

例

- -

これが変形前の MDN ロゴの画像です。

- -

MDN ロゴ

- -

回転

- -

ここでは MDN ロゴを、左下の角から90度回転させます。

- -
<img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Rotating', 'auto', 240) }}

- -

傾斜と平行移動

- -

この例は div 要素を10度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。

- -
<img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Skewing_and_translating') }}

- -

3D 特有の CSS プロパティ

- -

立体空間で CSS 変形 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。

- -

遠近感

- -

設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。

- -

{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

- -

二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。

- -

{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

- -

ここまで完了すれば、 3D 空間で要素に働きかけることができます。

- -

関連情報

- - diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.md b/files/ja/web/css/css_transforms/using_css_transforms/index.md new file mode 100644 index 0000000000..7ebaeeb3c3 --- /dev/null +++ b/files/ja/web/css/css_transforms/using_css_transforms/index.md @@ -0,0 +1,85 @@ +--- +title: CSS 変換の使用 +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +tags: + - 3D + - Advanced + - CSS + - CSS Transforms + - Graphics + - ガイド + - Rotate + - Scale + - Scaling + - perspective + - rotation +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +{{CSSRef}} + +**CSS 変換** (transform) は、座標空間を編集することで、通常のフロー処理を混乱させずに影響下にあるコンテンツの形状や位置を変えることができます。このガイドは変換の使用についての解説を行ないます。 + +CSS 変換は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変換には、二次元と三次元空間の両方について回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) があります。 + +> **Warning:** [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model)によって配置された要素に対してのみ `transform` を実行することができます。言うまでもなく、 `display: block` である要素がボックスモデルで配置されます。 + +## CSS 変換のプロパティ + +CSS 変換の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。 + +- {{cssxref("transform-origin")}} + - : 原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変換で使用されれます。 +- {{cssxref("transform")}} + - : 要素に適用する変換を指定します。変換の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。 + +## 例 + +これが変換前の MDN ロゴの画像です。 + +![MDN ロゴ](logo.png) + +

回転

+ +ここでは MDN ロゴを、左下の角から 90 度回転させます。 + +```html + +``` + +{{EmbedLiveSample('Rotating', 'auto', 240) }} + +

傾斜と平行移動

+ +この例は div 要素を 10 度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。 + +```html + +``` + +{{EmbedLiveSample('Skewing_and_translating') }} + +## 3D 特有の CSS プロパティ + +立体空間で CSS 変換 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。 + +

遠近感

+ +設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。 + +{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}} + +二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。 + +{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}} + +ここまで行えば、 3D 空間に要素を配置することができます。 + +## 関連情報 + +- [端末の向きと 3D 変換の併用](/ja/docs/Web/Events/Using_device_orientation_with_3D_transforms) +- [Intro to CSS 3D transforms](http://desandro.github.com/3dtransforms/) (David DeSandro によるブログ記事) +- [CSS Transform Playground](https://css-transform.moro.es/) (CSS 変換機能を視覚化するオンラインツール) diff --git a/files/ja/web/css/css_transforms/using_css_transforms/logo.png b/files/ja/web/css/css_transforms/using_css_transforms/logo.png new file mode 100644 index 0000000000..d0e4f1d55b Binary files /dev/null and b/files/ja/web/css/css_transforms/using_css_transforms/logo.png differ diff --git a/files/ja/web/css/perspective-origin/index.html b/files/ja/web/css/perspective-origin/index.html deleted file mode 100644 index fce5d7669e..0000000000 --- a/files/ja/web/css/perspective-origin/index.html +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: perspective-origin -slug: Web/CSS/perspective-origin -tags: - - 3D - - CSS - - CSS プロパティ - - CSS 変形 - - perspective - - perspective-origin - - リファレンス -translation_of: Web/CSS/perspective-origin ---- -
{{CSSRef}}
- -

CSS の perspective-origin プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって消失点として使われます。

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

perspective-origin および {{cssxref('perspective')}} の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される {{cssxref("transform-function/perspective", "perspective()")}} 変換関数とは異なります。

- -

構文

- -
/* １値構文 */
-perspective-origin: x-position;
-
-/* ２値構文 */
-perspective-origin: x-position y-position;
-
-/* x-position と y-position がキーワードである場合は、
-   以下の構文も有効 */
-perspective-origin: y-position x-position;
-
-/* グローバル値 */
-perspective-origin: inherit;
-perspective-origin: initial;
-perspective-origin: unset;
-
- -

値

- -
-
x-position
-
消失点の横座標上の位置を示します。次のいずれかの値です。 -
    -
  • {{cssxref("<length-percentage>")}} は、絶対的な length 値、又は要素の幅に対する相対値で位置を示します。負の数も使えます。
    • -
  • left キーワードは、 length 値 0 を示すショートカットです。
    • -
  • center キーワードは、パーセント値 50% を示すショートカットです。
    • -
  • right キーワードは、パーセント値 100% を示すショートカットです。
    • -
-
-
y-position
-
消失点の縦座標上の位置を示します。次のいずれかの値です。 -
    -
  • {{cssxref("<length>")}} は、絶対的な length 値、又は要素の高さに対する相対値で位置を示します。負の数も使えます。
    • -
  • top キーワードは、 length 値 0 を示すショートカットです。
    • -
  • center キーワードは、パーセント値 50% を示すショートカットです。
    • -
  • bottom キーワードは、パーセント値 100% を示すキーワードです。
    • -
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

視点の変更

- -

この例は主要な perspective-origin 値で立方体を表示します。

- -

結果

- -

{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}

- -

HTML

- -
<section>
-<figure>
-  <caption><code>perspective-origin: top left;</code></caption>
-    <div class="container">
-    <div class="cube potl">
-      <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>
-    </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: top;</code></caption>
-   <div class="container">
-    <div class="cube potm">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: top right;</code></caption>
-  <div class="container">
-    <div class="cube potr">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: left;</code></caption>
-  <div class="container">
-    <div class="cube poml">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: 50% 50%;</code></caption>
-  <div class="container">
-    <div class="cube pomm">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: right;</code></caption>
-  <div class="container">
-    <div class="cube pomr">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: bottom left;</code></caption>
-  <div class="container">
-    <div class="cube pobl">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: bottom;</code></caption>
-  <div class="container">
-    <div class="cube pobm">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: bottom right;</code></caption>
-  <div class="container">
-    <div class="cube pobr">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: -200% -200%;</code></caption>
-  <div class="container">
-    <div class="cube po200200neg">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: 200% 200%;</code></caption>
-  <div class="container">
-    <div class="cube po200200pos">
-      <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>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <caption><code>perspective-origin: 200% -200%;</code></caption>
-  <div class="container">
-    <div class="cube po200200">
-      <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>
-    </div>
-  </div>
-</figure>
-
-</section>
-
- -

CSS

- -
/* perspective-origin の値 (例ごとに異なる) */
-.potl {
-  perspective-origin: top left;
-}
-.potm {
-  perspective-origin: top;
-}
-.potr {
-  perspective-origin: top right;
-}
-.poml {
-  perspective-origin: left;
-}
-.pomm {
-  perspective-origin: 50% 50%;
-}
-.pomr {
-  perspective-origin: right;
-}
-.pobl {
-  perspective-origin: bottom left;
-}
-.pobm {
-  perspective-origin: bottom;
-}
-.pobr {
-  perspective-origin: bottom right;
-}
-.po200200neg {
-  perspective-origin: -200% -200%;
-}
-.po200200pos {
-  perspective-origin: 200% 200%;
-}
-.po200200 {
-  perspective-origin: 200% -200%;
-}
-
-/* コンテナーの div、立方体の div、面の一般的な設定 */
-.container {
-  width: 100px;
-  height: 100px;
-  margin: 24px;
-  border: none;
-}
-
-.cube {
-  width: 100%;
-  height: 100%;
-  backface-visibility: visible;
-  perspective: 300px;
-  transform-style: preserve-3d;
-}
-
-.face {
-  display: block;
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border: none;
-  line-height: 100px;
-  font-family: sans-serif;
-  font-size: 60px;
-  color: white;
-  text-align: center;
-}
-
-/* 方向に基づいてそれぞれの面を設定 */
-.front {
-  background: rgba(0, 0, 0, 0.3);
-  transform: translateZ(50px);
-}
-.back {
-  background: rgba(0, 255, 0, 1);
-  color: black;
-  transform: rotateY(180deg) translateZ(50px);
-}
-.right {
-  background: rgba(196, 0, 0, 0.7);
-  transform: rotateY(90deg) translateZ(50px);
-}
-.left {
-  background: rgba(0, 0, 196, 0.7);
-  transform: rotateY(-90deg) translateZ(50px);
-}
-.top {
-  background: rgba(196, 196, 0, 0.7);
-  transform: rotateX(90deg) translateZ(50px);
-}
-.bottom {
-  background: rgba(196, 0, 196, 0.7);
-  transform: rotateX(-90deg) translateZ(50px);
-}
-
-/* レイアウトの見栄えをよくする */
-section {
-  background-color: #EEE;
-  padding: 10px;
-  font-family: sans-serif;
-  text-align: left;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.perspective-origin")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/perspective-origin/index.md b/files/ja/web/css/perspective-origin/index.md new file mode 100644 index 0000000000..24882d444e --- /dev/null +++ b/files/ja/web/css/perspective-origin/index.md @@ -0,0 +1,391 @@ +--- +title: perspective-origin +slug: Web/CSS/perspective-origin +tags: + - 3D + - CSS + - CSS プロパティ + - CSS 変形 + - perspective + - perspective-origin + - リファレンス +translation_of: Web/CSS/perspective-origin +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`perspective-origin`** プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって消失点として使われます。 + +{{EmbedInteractiveExample("pages/css/perspective-origin.html")}} + + + +**`perspective-origin`** および {{cssxref('perspective')}} の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される {{cssxref("transform-function/perspective", "perspective()")}} 変換関数とは異なります。 + +

構文

+ +
/* １値構文 */
+perspective-origin: x-position;
+
+/* ２値構文 */
+perspective-origin: x-position y-position;
+
+/* x-position と y-position がキーワードである場合は、
+   以下の構文も有効 */
+perspective-origin: y-position x-position;
+
+/* グローバル値 */
+perspective-origin: inherit;
+perspective-origin: initial;
+perspective-origin: unset;
+
+ +

値

+ +- x-position +
消失点の横座標上の位置を示します。次のいずれかの値です。 + +
+- y-position +
消失点の縦座標上の位置を示します。次のいずれかの値です。 + +
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

視点の変更

+ +この例は主要な `perspective-origin` 値で立方体を表示します。 + +

結果

+ +{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}} + +

HTML

+ +
<section>
+<figure>
+  <caption><code>perspective-origin: top left;</code></caption>
+    <div class="container">
+    <div class="cube potl">
+      <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>
+    </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: top;</code></caption>
+   <div class="container">
+    <div class="cube potm">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: top right;</code></caption>
+  <div class="container">
+    <div class="cube potr">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: left;</code></caption>
+  <div class="container">
+    <div class="cube poml">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 50% 50%;</code></caption>
+  <div class="container">
+    <div class="cube pomm">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: right;</code></caption>
+  <div class="container">
+    <div class="cube pomr">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom left;</code></caption>
+  <div class="container">
+    <div class="cube pobl">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom;</code></caption>
+  <div class="container">
+    <div class="cube pobm">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom right;</code></caption>
+  <div class="container">
+    <div class="cube pobr">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: -200% -200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200neg">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 200% 200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200pos">
+      <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>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 200% -200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200">
+      <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>
+    </div>
+  </div>
+</figure>
+
+</section>
+
+ +

CSS

+ +
/* perspective-origin の値 (例ごとに異なる) */
+.potl {
+  perspective-origin: top left;
+}
+.potm {
+  perspective-origin: top;
+}
+.potr {
+  perspective-origin: top right;
+}
+.poml {
+  perspective-origin: left;
+}
+.pomm {
+  perspective-origin: 50% 50%;
+}
+.pomr {
+  perspective-origin: right;
+}
+.pobl {
+  perspective-origin: bottom left;
+}
+.pobm {
+  perspective-origin: bottom;
+}
+.pobr {
+  perspective-origin: bottom right;
+}
+.po200200neg {
+  perspective-origin: -200% -200%;
+}
+.po200200pos {
+  perspective-origin: 200% 200%;
+}
+.po200200 {
+  perspective-origin: 200% -200%;
+}
+
+/* コンテナーの div、立方体の div、面の一般的な設定 */
+.container {
+  width: 100px;
+  height: 100px;
+  margin: 24px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective: 300px;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* レイアウトの見栄えをよくする */
+section {
+  background-color: #EEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+ +

仕様書

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

ブラウザーの互換性

+ +
+{{Compat("css.properties.perspective-origin")}} +
+ +## 関連情報 + + diff --git a/files/ja/web/css/perspective/index.html b/files/ja/web/css/perspective/index.html deleted file mode 100644 index 52e8a10d61..0000000000 --- a/files/ja/web/css/perspective/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: perspective -slug: Web/CSS/perspective -tags: - - CSS - - CSS プロパティ - - CSS 変形 - - Reference - - グラフィック - - プロパティ - - 距離 -translation_of: Web/CSS/perspective ---- -
{{CSSRef}}
- -

perspective は CSS のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。 z>0 である三次元要素はより大きく、 z<0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。

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

ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の perspective プロパティの値より大きい要素は描画されません。

- -

消失点は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。

- -

このプロパティを 0 と none 以外の値で使用すると、新たな重ね合わせコンテキストを生成します。また、その場合、オブジェクトはそれを含む position: fixed の要素の包含ブロックとして動作します。

- -

構文

- -
/* キーワード値 */
-perspective: none;
-
-/* <length> 値 */
-perspective: 20px;
-perspective: 3.5em;
-
-/* グローバル値 */
-perspective: inherit;
-perspective: initial;
-perspective: unset;
-
- -

値

- -
-
none
-
立体的な変形を一切適用しないことを示すキーワードです。
-
<length>
-
ユーザーと z=0 平面間の距離を表す {{cssxref("<length>")}} です。立体的な変形を要素とその内容に適用するときに使います。 0 や負の値ならば、立体的な変形は適用されません。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

視点の設定

- -

この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。

- -

結果

- -

{{EmbedLiveSample('Setting_perspective', 660, 700)}}

- -

HTML

- -

以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。

- -
<table>
-  <tbody>
-    <tr>
-      <th><code>perspective: 250px;</code>
-      </th>
-      <th><code>perspective: 350px;</code>
-      </th>
-    </tr>
-    <tr>
-      <td>
-        <div class="container">
-          <div class="cube pers250">
-            <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>
-          </div>
-        </div>
-      </td>
-      <td>
-        <div class="container">
-          <div class="cube pers350">
-            <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>
-          </div>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>perspective: 500px;</code>
-      </th>
-      <th><code>perspective: 650px;</code>
-      </th>
-    </tr>
-    <tr>
-      <td>
-        <div class="container">
-          <div class="cube pers500">
-            <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>
-          </div>
-        </div>
-      </td>
-      <td>
-        <div class="container">
-          <div class="cube pers650">
-            <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>
-          </div>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
- -

CSS

- -

様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。

- -
/* さまざまな perspective の値のためのショートハンドクラス */
-.pers250 {
-  perspective: 250px;
-}
-
-.pers350 {
-  perspective: 350px;
-}
-
-.pers500 {
-  perspective: 500px;
-}
-
-.pers650 {
-  perspective: 650px;
-}
-
-/* コンテナーの div、立方体の div、面の一般的な設定 */
-.container {
-  width: 200px;
-  height: 200px;
-  margin: 75px 0 0 75px;
-  border: none;
-}
-
-.cube {
-  width: 100%;
-  height: 100%;
-  backface-visibility: visible;
-  perspective-origin: 150% 150%;
-  transform-style: preserve-3d;
-}
-
-.face {
-  display: block;
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border: none;
-  line-height: 100px;
-  font-family: sans-serif;
-  font-size: 60px;
-  color: white;
-  text-align: center;
-}
-
-/* 方向に基づいてそれぞれの面を設定 */
-.front {
-  background: rgba(0, 0, 0, 0.3);
-  transform: translateZ(50px);
-}
-
-.back {
-  background: rgba(0, 255, 0, 1);
-  color: black;
-  transform: rotateY(180deg) translateZ(50px);
-}
-
-.right {
-  background: rgba(196, 0, 0, 0.7);
-  transform: rotateY(90deg) translateZ(50px);
-}
-
-.left {
-  background: rgba(0, 0, 196, 0.7);
-  transform: rotateY(-90deg) translateZ(50px);
-}
-
-.top {
-  background: rgba(196, 196, 0, 0.7);
-  transform: rotateX(90deg) translateZ(50px);
-}
-
-.bottom {
-  background: rgba(196, 0, 196, 0.7);
-  transform: rotateX(-90deg) translateZ(50px);
-}
-
-/* テーブルの見栄えをよくする */
-th, p, td {
-  background-color: #EEEEEE;
-  padding: 10px;
-  font-family: sans-serif;
-   text-align: left;
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}{{Spec2('CSS Transforms 2')}}初回定義。
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.perspective")}}

- -

関連情報

- - diff --git a/files/ja/web/css/perspective/index.md b/files/ja/web/css/perspective/index.md new file mode 100644 index 0000000000..4adb05e7ef --- /dev/null +++ b/files/ja/web/css/perspective/index.md @@ -0,0 +1,257 @@ +--- +title: perspective +slug: Web/CSS/perspective +tags: + - CSS + - CSS プロパティ + - CSS 変形 + - Reference + - グラフィック + - プロパティ + - 距離 +translation_of: Web/CSS/perspective +--- +{{CSSRef}} + +**`perspective`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。 z>0 である三次元要素はより大きく、 z<0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。 + +{{EmbedInteractiveExample("pages/css/perspective.html")}} + + + +ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の `perspective` プロパティの値より大きい要素は描画されません。 + +消失点は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。 + +このプロパティを `0` と `none` 以外の値で使用すると、新たな[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。また、その場合、オブジェクトはそれを含む `position: fixed` の要素の包含ブロックとして動作します。 + +

構文

+ +
/* キーワード値 */
+perspective: none;
+
+/* <length> 値 */
+perspective: 20px;
+perspective: 3.5em;
+
+/* グローバル値 */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+
+ +

値

+ +- `none` + - : 立体的な変形を一切適用しないことを示すキーワードです。 +- `<length>` + - : ユーザーと z=0 平面間の距離を表す {{cssxref("<length>")}} です。立体的な変形を要素とその内容に適用するときに使います。 `0` や負の値ならば、立体的な変形は適用されません。 + +

形式文法

+ +{{csssyntax}} + +

例

+ +

視点の設定

+ +この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。 + +

結果

+ +{{EmbedLiveSample('Setting_perspective', 660, 700)}} + +

HTML

+ +以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。 + +
<table>
+  <tbody>
+    <tr>
+      <th><code>perspective: 250px;</code>
+      </th>
+      <th><code>perspective: 350px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers250">
+            <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>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers350">
+            <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>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>perspective: 500px;</code>
+      </th>
+      <th><code>perspective: 650px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers500">
+            <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>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers650">
+            <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>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。 + +
/* さまざまな perspective の値のためのショートハンドクラス */
+.pers250 {
+  perspective: 250px;
+}
+
+.pers350 {
+  perspective: 350px;
+}
+
+.pers500 {
+  perspective: 500px;
+}
+
+.pers650 {
+  perspective: 650px;
+}
+
+/* コンテナーの div、立方体の div、面の一般的な設定 */
+.container {
+  width: 200px;
+  height: 200px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* テーブルの見栄えをよくする */
+th, p, td {
+  background-color: #EEEEEE;
+  padding: 10px;
+  font-family: sans-serif;
+   text-align: left;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}{{Spec2('CSS Transforms 2')}}初回定義。
+ +{{cssinfo}} + +

ブラウザーの対応

+ +{{Compat("css.properties.perspective")}} + +## 関連情報 + + diff --git a/files/ja/web/css/rotate/index.html b/files/ja/web/css/rotate/index.html deleted file mode 100644 index 20d76f9561..0000000000 --- a/files/ja/web/css/rotate/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: rotate -slug: Web/CSS/rotate -tags: - - CSS - - CSS Property - - Reference - - Transforms -translation_of: Web/CSS/rotate ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の rotate プロパティは、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。

- -

構文

- -
/* キーワード値 */
-rotate: none;
-
-/* 角度値 */
-rotate: 90deg;
-rotate: 0.25turn;
-rotate: 1.57rad;
-
-/* x, y, z 軸名と角度 */
-rotate: x 90deg;
-rotate: y 0.25turn;
-rotate: z 1.57rad;
-
-/* ベクトルと角度の値 */
-rotate: 1 1 1 90deg;
- -

値

- -
-
角度値
-
{{CSSxRef("<angle>")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。rotate() (2次元回転) 関数と等価です。
-
x, y, z 軸と角度値
-
該当する要素を回転する軸の名前 ("x", "y", "z") と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 rotateX()/rotateY()/rotateZ() (3次元回転) 関数と等価です。
-
ベクトルと角度値
-
要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 {{CSSxRef("<number>")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 rotate3d() (3次元回転) 関数と等価です。
-
none
-
回転を適用しないことを表します。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<div>
-  <p class="rotate">Rotation</p>
-</div>
- -

CSS

- - - -
.rotate {
-  transition: rotate 1s;
-}
-
-div:hover .rotate {
-  rotate: 1 -0.5 1 180deg;
-}
- -

結果

- -

{{EmbedLiveSample("Examples")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}初回定義
- -

{{CSSInfo}}

- -

ブラウザー実装状況

- -

{{Compat("css.properties.rotate")}}

diff --git a/files/ja/web/css/rotate/index.md b/files/ja/web/css/rotate/index.md new file mode 100644 index 0000000000..5bb85884ad --- /dev/null +++ b/files/ja/web/css/rotate/index.md @@ -0,0 +1,118 @@ +--- +title: rotate +slug: Web/CSS/rotate +tags: + - CSS + - CSS Property + - Reference + - Transforms +translation_of: Web/CSS/rotate +--- +{{CSSRef}}{{SeeCompatTable}} + +[CSS](/ja/docs/Web/CSS) の **`rotate`** プロパティは、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。 + +

構文

+ +
/* キーワード値 */
+rotate: none;
+
+/* 角度値 */
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+
+/* x, y, z 軸名と角度 */
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+
+/* ベクトルと角度の値 */
+rotate: 1 1 1 90deg;
+ +

値

+ +- 角度値 + - : {{CSSxRef("<angle>")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。`rotate()` (2次元回転) 関数と等価です。 +- x, y, z 軸と角度値 + - : 該当する要素を回転する軸の名前 (`"x"`, "`y`", "`z"`) と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 `rotateX()`/`rotateY()`/`rotateZ()` (3次元回転) 関数と等価です。 +- ベクトルと角度値 + - : 要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 {{CSSxRef("<number>")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 `rotate3d()` (3次元回転) 関数と等価です。 +
`none`
+ - : 回転を適用しないことを表します。 + +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<div>
+  <p class="rotate">Rotation</p>
+</div>
+ +

CSS

+ + + +
.rotate {
+  transition: rotate 1s;
+}
+
+div:hover .rotate {
+  rotate: 1 -0.5 1 180deg;
+}
+ +

結果

+ +{{EmbedLiveSample("Examples")}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}初回定義
+ +{{CSSInfo}} + +

ブラウザー実装状況

+ +{{Compat("css.properties.rotate")}} diff --git a/files/ja/web/css/scale/index.html b/files/ja/web/css/scale/index.html deleted file mode 100644 index 48b7e4cbf7..0000000000 --- a/files/ja/web/css/scale/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: scale -slug: Web/CSS/scale -tags: - - CSS - - CSS Property - - Reference - - Transforms - - 'recipe:css-property' -translation_of: Web/CSS/scale ---- -
{{CSSRef}}
- -

scale は CSS のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で変換関数を指定する実際の順序を思い出す手間を軽減します。

- -

構文

- -
/* キーワード値 */
-scale: none;
-
-/* １つの値 */
-/* 1より大きい値で要素を拡大 */
-scale: 2;
-/* 1より小さい値で要素を縮小 */
-scale: 0.5;
-
-/* ２つの値 */
-scale: 2 0.5;
-
-/* ３つの値 */
-scale: 2 0.5 2;
- -

値

- -
-
１つの数値
-
該当する要素の拡大率を指定する {{CSSxRef("<number>")}} であり、 X 及び Y 軸で同じ倍率になります。 scale() (2D 倍率) 関数に１つの値を指定した場合と等価です。
-
２つの長さ/パーセント値
-
２つの {{CSSxRef("<number>")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 scale() (2D 倍率) 関数に２つの値を指定した場合と等価です。
-
３つの長さ/パーセント値
-
３つの {{CSSxRef("<number>")}} 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 translate3d() (3D 倍率) 関数と等価です。
-
none
-
拡大率が適用されないことを示します。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

上に乗った際の要素の拡大Scaling an element on hover

- -

HTML

- -
<div>
-  <p class="scale">Scaling</p>
-</div>
- -

CSS

- -
* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-}
-
-div {
-  width: 150px;
-  margin: 0 auto;
-}
-
-p {
-  padding: 10px 5px;
-  border: 3px solid black;
-  border-radius: 20px;
-  width: 150px;
-  font-size: 1.2rem;
-  text-align: center;
-}
-
-.scale {
-  transition: scale 1s;
-}
-
-div:hover .scale {
-  scale: 2 0.7;
-}
-
- -

結果

- -

{{EmbedLiveSample("Scaling_an_element_on_hover")}}

- -

仕様書

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

ブラウザーの互換性

- -

{{Compat("css.properties.scale")}}

- -

関連情報

- - - -

注: skew は独立した変形値ではありません

diff --git a/files/ja/web/css/scale/index.md b/files/ja/web/css/scale/index.md new file mode 100644 index 0000000000..19f527c1b8 --- /dev/null +++ b/files/ja/web/css/scale/index.md @@ -0,0 +1,130 @@ +--- +title: scale +slug: Web/CSS/scale +tags: + - CSS + - CSS Property + - Reference + - Transforms + - 'recipe:css-property' +translation_of: Web/CSS/scale +--- +{{CSSRef}} + +**`scale`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変換関数を指定する実際の順序を思い出す手間を軽減します。 + +

構文

+ +
/* キーワード値 */
+scale: none;
+
+/* １つの値 */
+/* 1より大きい値で要素を拡大 */
+scale: 2;
+/* 1より小さい値で要素を縮小 */
+scale: 0.5;
+
+/* ２つの値 */
+scale: 2 0.5;
+
+/* ３つの値 */
+scale: 2 0.5 2;
+ +

値

+ +- １つの数値 + - : 該当する要素の拡大率を指定する {{CSSxRef("<number>")}} であり、 X 及び Y 軸で同じ倍率になります。 `scale()` (2D 倍率) 関数に１つの値を指定した場合と等価です。 +- ２つの長さ/パーセント値 + - : ２つの {{CSSxRef("<number>")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 `scale()` (2D 倍率) 関数に２つの値を指定した場合と等価です。 +- ３つの長さ/パーセント値 + - : ３つの {{CSSxRef("<number>")}} 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 `translate3d()` (3D 倍率) 関数と等価です。 +
`none`
+ - : 拡大率が適用されないことを示します。 + +

公式定義

+ +{{cssinfo}} + +

形式文法

+ +{{csssyntax}} + +

例

+ +

上に乗った際の要素の拡大Scaling an element on hover

+ +

HTML

+ +
<div>
+  <p class="scale">Scaling</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.scale {
+  transition: scale 1s;
+}
+
+div:hover .scale {
+  scale: 2 0.7;
+}
+
+ +

結果

+ +{{EmbedLiveSample("Scaling_an_element_on_hover")}} + +

仕様書

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

ブラウザーの互換性

+ +{{Compat("css.properties.scale")}} + +## 関連情報 + + + +注: skew は独立した変形値ではありません diff --git a/files/ja/web/css/transform-origin/index.html b/files/ja/web/css/transform-origin/index.html deleted file mode 100644 index 3e48cbe9c0..0000000000 --- a/files/ja/web/css/transform-origin/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: transform-origin -slug: Web/CSS/transform-origin -tags: - - CSS - - CSS Property - - CSS Transforms - - Reference - - 'default value: center' - - 'recipe:css-property' - - transform-origin -translation_of: Web/CSS/transform-origin ---- -
{{ CSSRef }}
- -

transform-origin は CSS のプロパティで、要素の変形 (transform) における原点を設定します。

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

変形の原点とは、それを中心に変形が適用される点です。例えば、 rotate() 関数における変形の原点は、回転の中心です。

- -

このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。
- すなわち、

- -
transform-origin: -100% 50%;
-transform: rotate(45deg);
-
- -

この定義は以下の変形と同じです。

- -
transform-origin: 0 0;
-transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
- -

既定で、変形の原点は center です。

- -

構文

- -
/* 値１つの構文 */
-transform-origin: 2px;
-transform-origin: bottom;
-
-/* x-offset | y-offset */
-transform-origin: 3cm 2px;
-
-/* x-offset-keyword | y-offset */
-transform-origin: left 2px;
-
-/* x-offset-keyword | y-offset-keyword */
-transform-origin: right top;
-
-/* y-offset-keyword | x-offset-keyword */
-transform-origin: top right;
-
-/* x-offset | y-offset | z-offset */
-transform-origin: 2px 30% 10px;
-
-/* x-offset-keyword | y-offset | z-offset */
-transform-origin: left 5px -3px;
-
-/* x-offset-keyword | y-offset-keyword | z-offset */
-transform-origin: right bottom 2cm;
-
-/* y-offset-keyword | x-offset-keyword | z-offset */
-transform-origin: bottom right 2cm;
-
-/* グローバル値 */
-transform-origin: inherit;
-transform-origin: initial;
-transform-origin: unset;
-
- -

transform-origin プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する初期値にリセットされます。

- -

２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが center だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。

- - - -

値

- -
-
x-offset
-
{{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの左端から変形の原点までの距離を示す値です。
-
offset-keyword
-
left, right, top, bottom, center のいずれかのキーワードで、対応するオフセットを表します。
-
y-offset
-
{{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの右端から変形の原点までの距離を示す値です。
-
x-offset-keyword
-
left, right, center のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。
-
y-offset-keyword
-
top, bottom, center のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。
-
z-offset
-
{{cssxref("<length>")}} 値 ({{cssxref("<percentage>")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。
-
- -

キーワードは便利な速記であり、次の {{cssxref("<percentage>")}} 値に相当します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
キーワード値
left0%
center50%
right100%
top0%
bottom100%
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
コードサンプル
-

transform: none;

- 		- - -
{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}
-
-

transform: rotate(30deg);

- 		- - -
{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}
-
-

transform: rotate(30deg);
- transform-origin: 0 0;

- 		- - -
{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}
-
-

transform: rotate(30deg);
- transform-origin: 100% 100%;

- 		- - -
{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}
-
-

transform: rotate(30deg);
- transform-origin: -1em -3em;

- 		- - -
{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}
-
-

transform: scale(1.7);

- 		- - -
{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}
-
-

transform: scale(1.7);
- transform-origin: 0 0;

- 		- - -
{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}
-
-

transform: scale(1.7);
- transform-origin: 100% -30%;

- 		- - -
{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}
-
-

transform: skewX(50deg);
- transform-origin: 100% -30%;

- 		- - -
{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}
-
-

transform: skewY(50deg);
- transform-origin: 100% -30%;

- 		- - -
{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}{{ Spec2('CSS3 Transforms') }}
- -

ブラウザーの互換性

- -

{{Compat("css.properties.transform-origin")}}

- -

関連情報

- - diff --git a/files/ja/web/css/transform-origin/index.md b/files/ja/web/css/transform-origin/index.md new file mode 100644 index 0000000000..e7bb375699 --- /dev/null +++ b/files/ja/web/css/transform-origin/index.md @@ -0,0 +1,474 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS + - CSS Property + - CSS Transforms + - Reference + - 'default value: center' + - 'recipe:css-property' + - transform-origin +translation_of: Web/CSS/transform-origin +--- +{{ CSSRef }} + +**`transform-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の変形 (transform) における原点を設定します。 + +{{EmbedInteractiveExample("pages/css/transform-origin.html")}} + + + +変形の原点とは、それを中心に変形が適用される点です。例えば、 `[rotate()](/ja/docs/Web/CSS/transform-function/rotate)` 関数における変形の原点は、回転の中心です。 + +

このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。
+ すなわち、

+ +
transform-origin: -100% 50%;
+transform: rotate(45deg);
+
+ +この定義は以下の変形と同じです。 + +
transform-origin: 0 0;
+transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
+ +既定で、変形の原点は `center` です。 + +

構文

+ +
/* 値１つの構文 */
+transform-origin: 2px;
+transform-origin: bottom;
+
+/* x-offset | y-offset */
+transform-origin: 3cm 2px;
+
+/* x-offset-keyword | y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword | y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword | x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset | y-offset | z-offset */
+transform-origin: 2px 30% 10px;
+
+/* x-offset-keyword | y-offset | z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword | y-offset-keyword | z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword | x-offset-keyword | z-offset */
+transform-origin: bottom right 2cm;
+
+/* グローバル値 */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+
+ +`transform-origin` プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する[初期値](/ja/docs/Web/CSS/initial_value)にリセットされます。 + +２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが `center` だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。 + + + +

値

+ +- x-offset + - : {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの左端から変形の原点までの距離を示す値です。 +- offset-keyword + - : `left`, `right`, `top`, `bottom`, `center` のいずれかのキーワードで、対応するオフセットを表します。 +- y-offset + - : {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの右端から変形の原点までの距離を示す値です。 +- x-offset-keyword + - : `left`, `right`, `center` のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。 +- y-offset-keyword + - : `top`, `bottom`, `center` のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。 +- z-offset + - : {{cssxref("<length>")}} 値 ({{cssxref("<percentage>")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。 + +キーワードは便利な速記であり、次の {{cssxref("<percentage>")}} 値に相当します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード値
`left``0%`
`center``50%`
`right``100%`
`top``0%`
`bottom``100%`
+ +

公式定義

+ +{{CSSInfo}} + +

形式文法

+ +{{csssyntax}} + +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コードサンプル
+ `transform: none;` + + + + {{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }} +
+ `transform: rotate(30deg);` + + + + {{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }} +
+

transform: rotate(30deg);
+ transform-origin: 0 0;

+ 		+ + + {{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }} +
+

transform: rotate(30deg);
+ transform-origin: 100% 100%;

+ 		+ + + {{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }} +
+

transform: rotate(30deg);
+ transform-origin: -1em -3em;

+ 		+ + + {{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }} +
+ `transform: scale(1.7);` + + + + {{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }} +
+

transform: scale(1.7);
+ transform-origin: 0 0;

+ 		+ + + {{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }} +
+

transform: scale(1.7);
+ transform-origin: 100% -30%;

+ 		+ + + {{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }} +
+

transform: skewX(50deg);
+ transform-origin: 100% -30%;

+ 		+ + + {{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }} +
+

transform: skewY(50deg);
+ transform-origin: 100% -30%;

+ 		+ + + {{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }} +
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}{{ Spec2('CSS3 Transforms') }}
+ +

ブラウザーの互換性

+ +{{Compat("css.properties.transform-origin")}} + +## 関連情報 + + diff --git a/files/ja/web/css/transform-style/index.html b/files/ja/web/css/transform-style/index.html deleted file mode 100644 index 8384df1d3e..0000000000 --- a/files/ja/web/css/transform-style/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: transform-style -slug: Web/CSS/transform-style -tags: - - CSS - - CSS Property - - CSS Transforms - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/transform-style ---- -
{{CSSRef}}
- -

transform-style は CSS のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。

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

平面化した場合、子要素は自身の 3D 空間に存在しなくなります。

- -

このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。

- -

構文

- -
/* キーワード値 */
-transform-style: flat;
-transform-style: preserve-3d;
-
-/* グローバル値 */
-transform-style: inherit;
-transform-style: initial;
-transform-style: unset;
-
- -

値

- -
-
flat
-
要素の子要素を要素自身の平面上に配置することを示します。
-
preserve-3d
-
要素の子要素を 3D 空間に配置することを示します。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

変換スタイルのデモ

- -

この例では、変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で transform-style: preserve-3d が設定されているため、3D 空間で変換され、意図したとおりに表示されます。

- -

また、これと transform-style: flat の間で切り替えられるチェックボックスも用意されています。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。

- -

HTML

- -
<section id="example-element">
-  <div class="face front">1</div>
-  <div class="face back">2</div>
-  <div class="face right">3</div>
-  <div class="face left">4</div>
-  <div class="face top">5</div>
-  <div class="face bottom">6</div>
-</section>
-
-<div class="checkbox">
-  <label for="preserve"><code>preserve-3d</code></label>
-  <input type="checkbox" id="preserve" checked>
-</div>
- -

CSS

- -
#example-element {
-  margin: 50px;
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  transform: rotate3d(1, 1, 1, 30deg);
-}
-
-.face {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  backface-visibility: inherit;
-  font-size: 60px;
-  color: #fff;
-}
-
-.front {
-    background: rgba(90,90,90,.7);
-    transform: translateZ(50px);
-}
-
-.back {
-    background: rgba(0,210,0,.7);
-    transform: rotateY(180deg) translateZ(50px);
-}
-
-.right {
-  background: rgba(210,0,0,.7);
-  transform: rotateY(90deg) translateZ(50px);
-}
-
-.left {
-  background: rgba(0,0,210,.7);
-  transform: rotateY(-90deg) translateZ(50px);
-}
-
-.top {
-  background: rgba(210,210,0,.7);
-  transform: rotateX(90deg) translateZ(50px);
-}
-
-.bottom {
-  background: rgba(210,0,210,.7);
-  transform: rotateX(-90deg) translateZ(50px);
-}
- -

JavaScript

- -
const cube = document.getElementById('example-element');
-const checkbox = document.getElementById('preserve');
-
-checkbox.addEventListener('change', () => {
-  if(checkbox.checked) {
-    cube.style.transformStyle = 'preserve-3d';
-  } else {
-    cube.style.transformStyle = 'flat';
-  }
-})
- -

結果

- -

{{EmbedLiveSample('Transform_style_demonstration', '100%', 260)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}{{Spec2('CSS Transforms 2')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.transform-style")}}

- -

関連情報

- - diff --git a/files/ja/web/css/transform-style/index.md b/files/ja/web/css/transform-style/index.md new file mode 100644 index 0000000000..0794591d5f --- /dev/null +++ b/files/ja/web/css/transform-style/index.md @@ -0,0 +1,172 @@ +--- +title: transform-style +slug: Web/CSS/transform-style +tags: + - CSS + - CSS Property + - CSS Transforms + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/transform-style +--- +{{CSSRef}} + +**`transform-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。 + +{{EmbedInteractiveExample("pages/css/transform-style.html")}} + + + +平面化した場合、子要素は自身の 3D 空間に存在しなくなります。 + +このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。 + +

構文

+ +
/* キーワード値 */
+transform-style: flat;
+transform-style: preserve-3d;
+
+/* グローバル値 */
+transform-style: inherit;
+transform-style: initial;
+transform-style: unset;
+
+ +

値

+ +- `flat` + - : 要素の子要素を要素自身の平面上に配置することを示します。 +- `preserve-3d` + - : 要素の子要素を 3D 空間に配置することを示します。 + +

公式定義

+ +{{CSSInfo}} + +

形式文法

+ +{{csssyntax}} + +

例

+ +

変換スタイルのデモ

+ +この例では、変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で `transform-style: preserve-3d` が設定されているため、3D 空間で変換され、意図したとおりに表示されます。 + +また、これと `transform-style: flat` の間で切り替えられるチェックボックスも用意されています。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。 + +

HTML

+ +
<section id="example-element">
+  <div class="face front">1</div>
+  <div class="face back">2</div>
+  <div class="face right">3</div>
+  <div class="face left">4</div>
+  <div class="face top">5</div>
+  <div class="face bottom">6</div>
+</section>
+
+<div class="checkbox">
+  <label for="preserve"><code>preserve-3d</code></label>
+  <input type="checkbox" id="preserve" checked>
+</div>
+ +

CSS

+ +
#example-element {
+  margin: 50px;
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: rotate3d(1, 1, 1, 30deg);
+}
+
+.face {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: inherit;
+  font-size: 60px;
+  color: #fff;
+}
+
+.front {
+    background: rgba(90,90,90,.7);
+    transform: translateZ(50px);
+}
+
+.back {
+    background: rgba(0,210,0,.7);
+    transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(210,0,0,.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0,0,210,.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(210,210,0,.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(210,0,210,.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+ +

JavaScript

+ +
const cube = document.getElementById('example-element');
+const checkbox = document.getElementById('preserve');
+
+checkbox.addEventListener('change', () => {
+  if(checkbox.checked) {
+    cube.style.transformStyle = 'preserve-3d';
+  } else {
+    cube.style.transformStyle = 'flat';
+  }
+})
+ +

結果

+ +{{EmbedLiveSample('Transform_style_demonstration', '100%', 260)}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}{{Spec2('CSS Transforms 2')}}初回定義
+ +

ブラウザーの互換性

+ +{{Compat("css.properties.transform-style")}} + +## 関連情報 + + diff --git a/files/ja/web/css/transform/index.html b/files/ja/web/css/transform/index.html deleted file mode 100644 index 360b12a5a4..0000000000 --- a/files/ja/web/css/transform/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: transform -slug: Web/CSS/transform -tags: - - CSS - - CSS プロパティ - - CSS 変形 - - Reference -translation_of: Web/CSS/transform ---- -
{{CSSRef}}
- -
CSS のプロパティ transform は、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の視覚整形モデルの座標空間を変更します。
- -
{{EmbedInteractiveExample("pages/css/transform.html")}}
- - - -

このプロパティに none 以外の値が設定されていると、重ね合わせコンテキスト が作成されます。この場合、その要素はその中に含まれる position: fixed; または position: absolute; である要素すべての包含ブロックとして扱われます。

- -
-

変形可能な要素のみが transform の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、非置換インラインボックス、表の列ボックス、表の列グループボックスを除くすべての要素です。

-
- -

構文

- -
/* キーワード値 */
-transform: none;
-
-/* 関数値 */
-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-transform: perspective(17px);
-transform: rotate(0.5turn);
-transform: rotate3d(1, 2.0, 3.0, 10deg);
-transform: rotateX(10deg);
-transform: rotateY(10deg);
-transform: rotateZ(10deg);
-transform: translate(12px, 50%);
-transform: translate3d(12px, 50%, 3em);
-transform: translateX(2em);
-transform: translateY(3in);
-transform: translateZ(2px);
-transform: scale(2, 0.5);
-transform: scale3d(2.5, 1.2, 0.3);
-transform: scaleX(2);
-transform: scaleY(0.5);
-transform: scaleZ(0.3);
-transform: skew(30deg, 20deg);
-transform: skewX(30deg);
-transform: skewY(1.07rad);
-
-/* 複数の関数値 */
-transform: translateX(10px) rotate(10deg) translateY(5px);
-transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
-
-/* グローバル値 */
-transform: inherit;
-transform: initial;
-transform: unset;
-
- -

transform プロパティには、キーワード値 none か <transform-function> の値のいずれかが指定されます。

- -

値

- -
-
{{cssxref("<transform-function>")}}
-
適用される 1 つ以上の CSS 変形関数です。変形関数は、左から右へ順に重ねられ、つまり右から左の順に変形の混合の効果が適用されます。
-
none
-
変形を何も適用しないことを指定します。
-
- -

形式文法

- -{{csssyntax}} - -

{{cssxref("transform-function/perspective", "perspective()")}} を複数の関数の中で使用する場合は、最初に配置しなければなりません。

- -

例

- -

HTML

- -
<div>Transformed element</div>
- -

CSS

- -
div {
-  border: solid red;
-  transform: translate(30px, 20px) rotate(20deg);
-  width: 140px;
-  height: 60px;
-}
- -

結果

- -

{{EmbedLiveSample("Examples", "400", "160")}}

- -

その他の例は、CSS Transforms の利用 および {{cssxref("<transform-function>")}} をご覧ください。

- -

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

- -

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

- -

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

- -

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

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}3D 変換関数を追加。
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.transform")}}

- -

関連情報

- - diff --git a/files/ja/web/css/transform/index.md b/files/ja/web/css/transform/index.md new file mode 100644 index 0000000000..e5e505a742 --- /dev/null +++ b/files/ja/web/css/transform/index.md @@ -0,0 +1,148 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - CSS プロパティ + - CSS 変形 + - Reference +translation_of: Web/CSS/transform +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) のプロパティ **`transform`** は、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の[視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)の座標空間を変更します。 + +{{EmbedInteractiveExample("pages/css/transform.html")}} + + + +このプロパティに `none` 以外の値が設定されていると、[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) が作成されます。この場合、その要素はその中に含まれる `position: fixed;` または `position: absolute;` である要素すべての[包含ブロック](/ja/docs/Web/CSS/Containing_block)として扱われます。 + +
+変形可能な要素のみが `transform` の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、[非置換インラインボックス](/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)を除くすべての要素です。 +
+ +

構文

+ +
/* キーワード値 */
+transform: none;
+
+/* 関数値 */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* 複数の関数値 */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* グローバル値 */
+transform: inherit;
+transform: initial;
+transform: unset;
+
+ +`transform` プロパティには、キーワード値 `[none](#none)` か `[<transform-function>](#<transform-function>)` の値のいずれかが指定されます。 + +

値

+ +
{{cssxref("<transform-function>")}}
+ - : 適用される 1 つ以上の [CSS 変形関数](/ja/docs/Web/CSS/transform-function)です。変形関数は、左から右へ順に重ねられ、つまり右から左の順に変形の混合の効果が適用されます。 +
`none`
+ - : 変形を何も適用しないことを指定します。 + +

形式文法

+ +{{csssyntax}} + +{{cssxref("transform-function/perspective", "perspective()")}} を複数の関数の中で使用する場合は、最初に配置しなければなりません。 + +

例

+ +

HTML

+ +
<div>Transformed element</div>
+ +

CSS

+ +
div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}
+ +

結果

+ +{{EmbedLiveSample("Examples", "400", "160")}} + +その他の例は、[CSS Transforms の利用](/ja/docs/Web/Guide/CSS/Using_CSS_transforms) および {{cssxref("<transform-function>")}} をご覧ください。 + +

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

+ +拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 + +また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリ](/ja/docs/Web/CSS/Media_Queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 + +詳しくは以下の文書を参照してください。 + + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}3D 変換関数を追加。
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}初回定義
+ +{{cssinfo}} + +

ブラウザーの互換性

+ +{{Compat("css.properties.transform")}} + +## 関連情報 + + diff --git a/files/ja/web/css/translate/index.html b/files/ja/web/css/translate/index.html deleted file mode 100644 index c006580ae4..0000000000 --- a/files/ja/web/css/translate/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: translate -slug: Web/CSS/translate -tags: - - CSS - - CSS Property - - CSS 変形 - - Experimental - - Reference - - Transforms -translation_of: Web/CSS/translate ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

translate は CSS のプロパティで、平行移動による変形を独自に、 {{CSSxRef("transform")}} プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 transform の値で指定する変形関数を正確に思い出す必要がなくなります。

- -

構文

- -
/* キーワード値 */
-translate: none;
-
-/* 単一の値 */
-translate: 100px;
-translate: 50%;
-
-/* 二つの値 */
-translate: 100px 200px;
-translate: 50% 105px;
-
-/* 三つの値 */
-translate: 50% 105px 5rem;
-
- -

値

- -
-
単一の {{cssxref("<length-percentage>")}} 値
-
単一の {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、 X 軸および Y 軸方向が同じ移動量の二次元の平行移動を指定します。 translate() (二次元の平行移動) 関数に単一の値を指定したものと同等です。
-
二つの {{cssxref("<length-percentage>")}} 値
-
二つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、二次元の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 translate() (二次元の平行移動) 関数に二つの値を指定したものと同等です。
-
三つの値
-
二つの {{cssxref("<length-percentage>")}} 値と一つの {{cssxref("<length>")}} 値で、三次元の平行移動における X, Y, Z 軸の移動量を (それぞれ) 指定します。 translate3d() (三次元の平行移動) 関数と同等です。
-
none
-
平行移動が適用されないことを指定します。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<div>
-  <p class="translate">Translation</p>
-</div>
- -

CSS

- -
* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-}
-
-div {
-  width: 150px;
-  margin: 0 auto;
-}
-
-p {
-  padding: 10px 5px;
-  border: 3px solid black;
-  border-radius: 20px;
-  width: 150px;
-  font-size: 1.2rem;
-  text-align: center;
-}
-
-.translate {
-  transition: translate 1s;
-}
-
-div:hover .translate {
-  translate: 200px 50px;
-}
-
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.translate")}}

diff --git a/files/ja/web/css/translate/index.md b/files/ja/web/css/translate/index.md new file mode 100644 index 0000000000..175107e62c --- /dev/null +++ b/files/ja/web/css/translate/index.md @@ -0,0 +1,117 @@ +--- +title: translate +slug: Web/CSS/translate +tags: + - CSS + - CSS Property + - CSS 変形 + - Experimental + - Reference + - Transforms +translation_of: Web/CSS/translate +--- +{{CSSRef}}{{SeeCompatTable}} + +**`translate`** は [CSS](/ja/docs/Web/CSS) のプロパティで、平行移動による変形を独自に、 {{CSSxRef("transform")}} プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 `transform` の値で指定する変形関数を正確に思い出す必要がなくなります。 + +

構文

+ +
/* キーワード値 */
+translate: none;
+
+/* 単一の値 */
+translate: 100px;
+translate: 50%;
+
+/* 二つの値 */
+translate: 100px 200px;
+translate: 50% 105px;
+
+/* 三つの値 */
+translate: 50% 105px 5rem;
+
+ +

値

+ +- 単一の {{cssxref("<length-percentage>")}} 値 + - : 単一の {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、 X 軸および Y 軸方向が同じ移動量の二次元の平行移動を指定します。 `translate()` (二次元の平行移動) 関数に単一の値を指定したものと同等です。 +- 二つの {{cssxref("<length-percentage>")}} 値 + - : 二つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、二次元の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 `translate()` (二次元の平行移動) 関数に二つの値を指定したものと同等です。 +- 三つの値 + - : 二つの {{cssxref("<length-percentage>")}} 値と一つの {{cssxref("<length>")}} 値で、三次元の平行移動における X, Y, Z 軸の移動量を (それぞれ) 指定します。 `translate3d()` (三次元の平行移動) 関数と同等です。 +
`none`
+ - : 平行移動が適用されないことを指定します。 + +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<div>
+  <p class="translate">Translation</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.translate {
+  transition: translate 1s;
+}
+
+div:hover .translate {
+  translate: 200px 50px;
+}
+
+ +

結果

+ +{{EmbedLiveSample('Examples')}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}初回定義
+ +{{CSSInfo}} + +

ブラウザーの対応

+ +{{Compat("css.properties.translate")}} -- cgit v1.2.3-54-g00ecf