diff options
Diffstat (limited to 'files/ja/web/css/backface-visibility/index.md')
| -rw-r--r-- | files/ja/web/css/backface-visibility/index.md | 211 |
1 files changed, 211 insertions, 0 deletions
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")}} + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 [https://github.com/mdn/interactive-examples](https://github.com/mdn/interactive-examples) をクローンしてプルリクエストを送信してください。</p> + +要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転の変換が行われたときに、背面を見ることができます。 (このプロパティは、遠近感を持たない二次元の変換では効果がありません。) + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +backface-visibility: visible; +backface-visibility: hidden; + +/* グローバル値 */ +backface-visibility: inherit; +backface-visibility: initial; +backface-visibility: unset;</pre> + +`backface-visibility` プロパティは、以下に挙げたキーワードのうちの一つで指定します。 + +<h3 id="Values" name="Values">値</h3> + +- `visible` + - : ユーザーに対して裏を向いたとき、背面が可視になります。 +- `hidden` + - : 背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。 + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +{{cssinfo}} + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +{{csssyntax}} + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Cube_with_transparent_and_opaque_faces" name="Cube_with_transparent_and_opaque_faces">透明な面と不透明な面を持った立方体</h3> + +この例は、透明な面と不透明な面を持つ立方体を表示します。 + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><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></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">/* 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; +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +{{EmbedLiveSample('Cube_with_transparent_and_opaque_faces', '100%', 360)}} + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +{{Compat("css.properties.backface-visibility")}} + +## 関連情報 + +<ul> + <li>[CSS 変形の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)</li> +</ul> |