From c921a6c565ddc6f3eef7054903e2566e99fcc414 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:04:20 +0900 Subject: CSS 座標変換の文書を更新(変換関数を除く) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/13 時点の英語版に同期 --- files/ja/web/css/transform-style/index.md | 116 ++++++++++++++---------------- 1 file changed, 53 insertions(+), 63 deletions(-) (limited to 'files/ja/web/css/transform-style/index.md') diff --git a/files/ja/web/css/transform-style/index.md b/files/ja/web/css/transform-style/index.md index 0794591d5f..f9bf92eaba 100644 --- a/files/ja/web/css/transform-style/index.md +++ b/files/ja/web/css/transform-style/index.md @@ -3,79 +3,83 @@ title: transform-style slug: Web/CSS/transform-style tags: - CSS - - CSS Property - - CSS Transforms - - Experimental + - CSS プロパティ + - CSS 座標変換 + - 実験的 - Reference - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.transform-style translation_of: Web/CSS/transform-style --- {{CSSRef}} -**`transform-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。 +**`transform-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。 {{EmbedInteractiveExample("pages/css/transform-style.html")}} - - 平面化した場合、子要素は自身の 3D 空間に存在しなくなります。 このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。 -

構文

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

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

公式定義

+## 公式定義 {{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

+## 例 -

変換スタイルのデモ

+

座標変換スタイルのデモ

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

HTML

+#### 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>
+```html
+
+
1
+
2
+
3
+
4
+
5
+
6
+
-<div class="checkbox"> - <label for="preserve"><code>preserve-3d</code></label> - <input type="checkbox" id="preserve" checked> -</div>
+
+ + +
+``` -

CSS

+#### CSS -
#example-element {
+```css
+#example-element {
   margin: 50px;
   width: 100px;
   height: 100px;
@@ -123,50 +127,36 @@ transform-style: unset;
 .bottom {
   background: rgba(210,0,210,.7);
   transform: rotateX(-90deg) translateZ(50px);
-}
+} +``` -

JavaScript

+#### JavaScript -
const cube = document.getElementById('example-element');
+```js
+const cube = document.getElementById('example-element');
 const checkbox = document.getElementById('preserve');
 
-checkbox.addEventListener('change', () => {
+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")}} +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} ## 関連情報 - +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) -- cgit v1.2.3-54-g00ecf