We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

概要

CSSbackface-visibility プロパティは要素の裏面がユーザに面したときに、裏面を可視にするかどうかを決めます。要素の裏面は常に透明な背景を持ち、可視ならば表面の鏡像を表示します。

(2 つの要素を交互に使って)カードを裏返す効果を使う場合のように、要素の裏面から表面が見えてほしくない場合があります。

このプロパティは 遠近感 (perspective) のない 2D の 変換 (transforms) には効果を及ぼしません。

初期値visible
適用対象変形可能要素
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

backface-visibility: visible;
backface-visibility: hidden;

このプロパティは 2 種類の (排他的な) 値を使用できます:

  • visible。裏面は可視で、裏面には表面の鏡像が表示されます。
  • hidden。裏面は不可視で、裏面に表面の鏡像を表示しません。

形式文法

visible | hidden

透明な面を持つ立方体

HTML コンテンツ

<table>
  <tbody>
    <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>すべての面が透明であり、3 つの裏面が表面を通して見えています。</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>表面は不透明ではありませんが、裏面は表示されません。</p>
      </td>
    </tr>
  </tbody>
</table>

CSS コンテンツ

/* "立方体" の 3 つの裏面を表示または隠すショートハンドクラス */
.hidebf div {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.showbf div {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* コンテナ 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;
  -webkit-perspective: 300px;
  -webkit-perspective-origin: 150% 150%;
  -webkit-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);
  -webkit-transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
  -webkit-transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
  -webkit-transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
  -webkit-transform: rotateX(90deg) translateZ(50px)
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/* テーブルの見栄えをよくする */
th, p, td {
  background-color: #EEEEEE;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}

結果

仕様

仕様書 策定状況 コメント
CSS Transforms Level 1
backface-visibility の定義
草案 最初期の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 12-webkit 10 (10)-moz
16 (16)
10 15-webkit (有)-webkit
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 3.0-webkit (有)-webkit 10.0 (10)-moz
16.0 (16)
8.1
11-webkit
(有)-webkit (有)-webkit

関連情報

ドキュメントのタグと貢献者

このページの貢献者: SphinxKnight, yyss, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: SphinxKnight,