Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

backface-visibility: visible;

backface-visibility: hidden;

<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>6</div>  </div></section>

#default-example {  background: linear-gradient(skyblue, khaki);}#example-element {  width: 100px;  height: 100px;  perspective: 550px;  perspective-origin: 220% 220%;  transform-style: preserve-3d;}.face {  display: flex;  align-items: center;  justify-content: center;  width: 100%;  height: 100%;  position: absolute;  backface-visibility: inherit;  background: rgba(0, 0, 0, 0.4);  font-size: 60px;  color: white;}.front {  transform: translateZ(50px);}.back {  background: rgb(230, 0, 0);  color: white;  transform: rotateY(180deg) translateZ(50px);}.right {  background: rgba(0, 0, 0, 0.6);  transform: rotateY(90deg) translateZ(50px);}.bottom {  background: rgba(0, 0, 0, 0.6);  transform: rotateX(-90deg) translateZ(50px);}

/* Ключевые слова */backface-visibility: visible;backface-visibility: hidden;/* Глобальные значения */backface-visibility: inherit;backface-visibility: initial;backface-visibility: unset;

<table>  <tr>    <th><code>backface-visibility: visible;</code></th>    <th><code>backface-visibility: hidden;</code></th>  </tr>  <tr>    <td>      <div>        <div>          <div>1</div>          <div>2</div>          <div>3</div>          <div>4</div>          <div>5</div>          <div>6</div>        </div>      </div>      <p>        Since all faces are partially transparent, the back faces (2, 4, 5) are        visible through the front faces (1, 3, 6).      </p>    </td>    <td>      <div>        <div>          <div>1</div>          <div>2</div>          <div>3</div>          <div>4</div>          <div>5</div>          <div>6</div>        </div>      </div>      <p>The three back faces (2, 4, 5) are hidden.</p>    </td>  </tr></table>

/* Классы, которые будут показывать или скрывать   три задние грани "куба" */.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;}

Help improve MDN

This page was last modified on⁨7 нояб. 2025 г.⁩ byMDN contributors.