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/backface-visibility/index.md | 144 ++++++++++++-------------- 1 file changed, 67 insertions(+), 77 deletions(-) (limited to 'files/ja/web/css/backface-visibility') diff --git a/files/ja/web/css/backface-visibility/index.md b/files/ja/web/css/backface-visibility/index.md index d7d06cb00f..7ff1988716 100644 --- a/files/ja/web/css/backface-visibility/index.md +++ b/files/ja/web/css/backface-visibility/index.md @@ -3,10 +3,11 @@ title: backface-visibility slug: Web/CSS/backface-visibility tags: - CSS - - CSS Property - - CSS Transforms + - CSS プロパティ + - CSS 座標変換 - Reference - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.backface-visibility translation_of: Web/CSS/backface-visibility --- {{CSSRef}} @@ -15,90 +16,95 @@ translation_of: Web/CSS/backface-visibility {{EmbedInteractiveExample("pages/css/backface-visibility.html")}} - +要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転変換が行われたときに、背面を見ることができます。 (このプロパティは、視点を持たない二次元の座標変換では効果がありません。) -要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転の変換が行われたときに、背面を見ることができます。 (このプロパティは、遠近感を持たない二次元の変換では効果がありません。) +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 backface-visibility: visible;
 backface-visibility: hidden;
 
 /* グローバル値 */
 backface-visibility: inherit;
 backface-visibility: initial;
-backface-visibility: unset;
+backface-visibility: revert; +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>
+#### HTML
+
+```html
+
+  
+    
+    
+  
+  
+    
+    
+  
+
backface-visibility: visible;backface-visibility: hidden;

+      

+        

+          
1

+          
2

+          
3

+          
4

+          
5

+          
6

+        

+      

+      

         すべての面が透明であり、
         裏面 (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>
+      

+    		
+      

+        

+          
1

+          
2

+          
3

+          
4

+          
5

+          
6

+        

+      

+      

         背後の3面 (2, 4, 5) は非表示です。
-      </p>
-    </td>
-  </tr>
-</table>
+      

+    

+```
 
-
CSS

+#### CSS
 
-
/* Classes that will show or hide the
-   three back faces of the "cube" */
+```css
+/* 「立方体」の 3 つの背面を表示または非表示にするクラス */
 .showbf div {
   backface-visibility: visible;
 }
@@ -175,37 +181,21 @@ th, p, td {
   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')}}初回定義

+{{Specifications}}
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-{{Compat("css.properties.backface-visibility")}}
+{{Compat}}
 
 ## 関連情報
 
-
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
-- 
cgit v1.2.3-54-g00ecf