CSS3

：

プロパティ

：

backface-visibility

　 編集：2022.07.14 by T.A.

→● mdn

¶3Dモデルにおける裏面の表示方法。

名前 backface-visibility
値 visible | hidden
初期値 visible
適用対象 変形可能な要素
継承 されない
百分率 受容しない
算出値 指定されたキーワード
正準的順序 文法に従う
アニメーション型 離散的

backface-visibility: hidden を伴う要素の可視性は、次の様にして決定される：

  1. 要素の累積 3D 変形行列を算出する。
  2. 行列の m33 成分が負である場合、要素は見えなくされるべきである。 他の場合は可視である。
visible 
<DIV style="border:1px solid black; width:200px; height:100px;">
 <DIV style="border:1px solid red; width:100%; height:100%;
  transform-style:preserve-3d;
  backface-visibility:visible;
  perspective:300px;
  perspective-origin:right bottom;
 ">
    <DIV style="border:1px solid black; width:100px; height:100px;
     position:absolute;
     font-size: 60px; line-height:100px;
     color:white; background:#f00; text-align:center;
     transform:rotateY(90deg) translateZ(50px) translateX(-50px);
    ">3</DIV>
    <DIV style="border:1px solid black; width:100px; height:100px;
     position:absolute;
     font-size: 60px; line-height:100px;
     color:white; background:#0f03; text-align:center;
     transform:translateX(50px) translateY(0px) translateZ(50px);
    ">あ</DIV>
  </DIV>
</DIV>

hidden 
<DIV style="border:1px solid black; width:200px; height:100px;">
 <DIV style="border:1px solid red; width:100%; height:100%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  perspective:300px;
  perspective-origin:right bottom;
 ">
    <DIV style="border:1px solid black; width:100px; height:100px;
     position:absolute;
     font-size: 60px; line-height:100px;
     color:white; background:#f00; text-align:center;
     transform:rotateY(90deg) translateZ(50px) translateX(-50px);
    ">3</DIV>
    <DIV style="border:1px solid black; width:100px; height:100px;
     position:absolute;
     font-size: 60px; line-height:100px;
     color:white; background:#0f03; text-align:center;
     transform:translateX(50px) translateY(0px) translateZ(50px);
    ">あ</DIV>
  </DIV>
</DIV>

例
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;
}
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>
テスト
別画面で表示させて。
HTML：

ここに表示
¶[Edge]✖？
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：